From 2eb11266b48fb46fc902119bba4247a3cc68f38b Mon Sep 17 00:00:00 2001 From: Ayush Date: Wed, 23 Oct 2024 21:28:27 +0530 Subject: [PATCH] added skeleton loading to the hospitals arond page --- client/package-lock.json | 64 ++++++++++++++-------------- client/package.json | 2 +- client/src/pages/HospitalsAround.jsx | 19 ++++++++- 3 files changed, 50 insertions(+), 35 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index f5b718e..e253aa4 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -14,7 +14,7 @@ "@fortawesome/free-brands-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/react-fontawesome": "^0.2.2", - "@mui/material": "^6.1.3", + "@mui/material": "^6.1.5", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -4843,9 +4843,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.3.tgz", - "integrity": "sha512-ajMUgdfhTb++rwqj134Cq9f4SRN8oXUqMRnY72YBnXiXai3olJLLqETheRlq3MM8wCKrbq7g6j7iWL1VvP44VQ==", + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.5.tgz", + "integrity": "sha512-3J96098GrC95XsLw/TpGNMxhUOnoG9NZ/17Pfk1CrJj+4rcuolsF2RdF3XAFTu/3a/A+5ouxlSIykzYz6Ee87g==", "license": "MIT", "funding": { "type": "opencollective", @@ -4853,16 +4853,16 @@ } }, "node_modules/@mui/material": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.3.tgz", - "integrity": "sha512-loV5MBoMKLrK80JeWINmQ1A4eWoLv51O2dBPLJ260IAhupkB3Wol8lEQTEvvR2vO3o6xRHuXe1WaQEP6N3riqg==", + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.5.tgz", + "integrity": "sha512-rhaxC7LnlOG8zIVYv7BycNbWkC5dlm9A/tcDUp0CuwA7Zf9B9JP6M3rr50cNKxI7Z0GIUesAT86ceVm44quwnQ==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/core-downloads-tracker": "^6.1.3", - "@mui/system": "^6.1.3", + "@babel/runtime": "^7.25.7", + "@mui/core-downloads-tracker": "^6.1.5", + "@mui/system": "^6.1.5", "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.3", + "@mui/utils": "^6.1.5", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", @@ -4881,7 +4881,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.3", + "@mui/material-pigment-css": "^6.1.5", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -4908,13 +4908,13 @@ "license": "MIT" }, "node_modules/@mui/private-theming": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.3.tgz", - "integrity": "sha512-XK5OYCM0x7gxWb/WBEySstBmn+dE3YKX7U7jeBRLm6vHU5fGUd7GiJWRirpivHjOK9mRH6E1MPIVd+ze5vguKQ==", + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.5.tgz", + "integrity": "sha512-FJqweqEXk0KdtTho9C2h6JEKXsOT7MAVH2Uj3N5oIqs6YKxnwBn2/zL2QuYYEtj5OJ87rEUnCfFic6ldClvzJw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/utils": "^6.1.3", + "@babel/runtime": "^7.25.7", + "@mui/utils": "^6.1.5", "prop-types": "^15.8.1" }, "engines": { @@ -4935,12 +4935,12 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.3.tgz", - "integrity": "sha512-i4yh9m+eMZE3cNERpDhVr6Wn73Yz6C7MH0eE2zZvw8d7EFkIJlCQNZd1xxGZqarD2DDq2qWHcjIOucWGhxACtA==", + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.5.tgz", + "integrity": "sha512-tiyWzMkHeWlOoE6AqomWvYvdml8Nv5k5T+LDwOiwHEawx8P9Lyja6ZwWPU6xljwPXYYPT2KBp1XvMly7dsK46A==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", + "@babel/runtime": "^7.25.7", "@emotion/cache": "^11.13.1", "@emotion/serialize": "^1.3.2", "@emotion/sheet": "^1.4.0", @@ -4969,16 +4969,16 @@ } }, "node_modules/@mui/system": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.3.tgz", - "integrity": "sha512-ILaD9UsLTBLjMcep3OumJMXh1PYr7aqnkHm/L47bH46+YmSL1zWAX6tWG8swEQROzW2GvYluEMp5FreoxOOC6w==", + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.5.tgz", + "integrity": "sha512-vPM9ocQ8qquRDByTG3XF/wfYTL7IWL/20EiiKqByLDps8wOmbrDG9rVznSE3ZbcjFCFfMRMhtxvN92bwe/63SA==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/private-theming": "^6.1.3", - "@mui/styled-engine": "^6.1.3", + "@babel/runtime": "^7.25.7", + "@mui/private-theming": "^6.1.5", + "@mui/styled-engine": "^6.1.5", "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.3", + "@mui/utils": "^6.1.5", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -5023,12 +5023,12 @@ } }, "node_modules/@mui/utils": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.3.tgz", - "integrity": "sha512-4JBpLkjprlKjN10DGb1aiy/ii9TKbQ601uSHtAmYFAS879QZgAD7vRnv/YBE4iBbc7NXzFgbQMCOFrupXWekIA==", + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.5.tgz", + "integrity": "sha512-vp2WfNDY+IbKUIGg+eqX1Ry4t/BilMjzp6p9xO1rfqpYjH1mj8coQxxDfKxcQLzBQkmBJjymjoGOak5VUYwXug==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", + "@babel/runtime": "^7.25.7", "@mui/types": "^7.2.18", "@types/prop-types": "^15.7.13", "clsx": "^2.1.1", diff --git a/client/package.json b/client/package.json index 0199e5c..15d12dd 100644 --- a/client/package.json +++ b/client/package.json @@ -9,7 +9,7 @@ "@fortawesome/free-brands-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/react-fontawesome": "^0.2.2", - "@mui/material": "^6.1.3", + "@mui/material": "^6.1.5", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/client/src/pages/HospitalsAround.jsx b/client/src/pages/HospitalsAround.jsx index 3add8ee..62c9c9e 100644 --- a/client/src/pages/HospitalsAround.jsx +++ b/client/src/pages/HospitalsAround.jsx @@ -7,7 +7,7 @@ import ReactDOMServer from 'react-dom/server'; // Import ReactDOMServer to rende import { useRecoilState } from 'recoil'; import { mode } from '../store/atom'; import 'leaflet-routing-machine'; // Import Leaflet Routing Machine - +import Skeleton from '@mui/material/Skeleton'; import Navbar from '../components/Navbar'; import '../styles/Nearbyhospitals.css'; @@ -302,8 +302,23 @@ const HospitalsAround = () => { className="h-[50vh] w-full md:w-[70%] md:h-screen " > + ) : locationError ? ( +

+ Having trouble fetching location. Please enable location access in + your browser and reload the page to retry. +

) : ( - locationError?

Having trouble fetching location. Please enable location access in your browser and reload the page to retry.

:

Fetching location...

+
+ + +
)}