From 4b5b5c283682f02d5088e9c4053843479c0df7bc Mon Sep 17 00:00:00 2001 From: kushwahnihal25-rgb Date: Mon, 8 Jun 2026 21:30:15 +0530 Subject: [PATCH] Add shimmer loading skeleton for analysis dashboard --- package-lock.json | 36 ++++++++++++++++++-------- package.json | 8 +++--- src/index.css | 21 +++++++++++++++ src/pages/AnalysisDashboard.tsx | 45 +++++++++++++++++++++++++++------ 4 files changed, 87 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index d6e7bfc..0b47487 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,16 +12,16 @@ "framer-motion": "^12.38.0", "i18next": "^26.3.0", "leaflet": "^1.9.4", - "lucide-react": "^1.16.0", + "lucide-react": "^1.17.0", "onnxruntime-web": "^1.26.0", "posthog-js": "^1.376.2", - "react": "^19.2.4", - "react-dom": "^19.2.4", + "react": "^19.2.7", + "react-dom": "^19.2.7", "react-hot-toast": "^2.6.0", "react-i18next": "^17.0.8", "react-joyride": "^3.1.0", "react-leaflet": "^5.0.0", - "react-router-dom": "^7.14.0", + "react-router-dom": "^7.17.0", "tailwindcss": "^4.2.2" }, "devDependencies": { @@ -3856,6 +3856,8 @@ }, "node_modules/cookie": { "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", "license": "MIT", "engines": { "node": ">=18" @@ -5861,7 +5863,9 @@ } }, "node_modules/lucide-react": { - "version": "1.16.0", + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.17.0.tgz", + "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==", "license": "ISC", "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" @@ -6250,20 +6254,24 @@ "license": "MIT" }, "node_modules/react": { - "version": "19.2.4", + "version": "19.2.7", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz", + "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==", "license": "MIT", "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "19.2.4", + "version": "19.2.7", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz", + "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==", "license": "MIT", "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^19.2.4" + "react": "^19.2.7" } }, "node_modules/react-hot-toast": { @@ -6351,7 +6359,9 @@ } }, "node_modules/react-router": { - "version": "7.14.0", + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.17.0.tgz", + "integrity": "sha512-FDELK7rTMlCHO5+reyXsPlmfr7N1F91lPHsWYfMEGQm/KQ+F4JFM8jGoeQDmDvdTs93Fw9aSilH+uKRb4/jXvQ==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -6371,10 +6381,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.14.0", + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.17.0.tgz", + "integrity": "sha512-fyU2yjGups/hE6Xz0I5ZYbVL8Gx29eCjgpHaRaTaVU+OOAdfRX05KsvyRm0GO8YQwOkhpU3MurW1jyMUJn+zSw==", "license": "MIT", "dependencies": { - "react-router": "7.14.0" + "react-router": "7.17.0" }, "engines": { "node": ">=20.0.0" @@ -6685,6 +6697,8 @@ }, "node_modules/set-cookie-parser": { "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", "license": "MIT" }, "node_modules/set-function-length": { diff --git a/package.json b/package.json index 1525380..b370fd2 100644 --- a/package.json +++ b/package.json @@ -20,16 +20,16 @@ "framer-motion": "^12.38.0", "i18next": "^26.3.0", "leaflet": "^1.9.4", - "lucide-react": "^1.16.0", + "lucide-react": "^1.17.0", "onnxruntime-web": "^1.26.0", "posthog-js": "^1.376.2", - "react": "^19.2.4", - "react-dom": "^19.2.4", + "react": "^19.2.7", + "react-dom": "^19.2.7", "react-hot-toast": "^2.6.0", "react-i18next": "^17.0.8", "react-joyride": "^3.1.0", "react-leaflet": "^5.0.0", - "react-router-dom": "^7.14.0", + "react-router-dom": "^7.17.0", "tailwindcss": "^4.2.2" }, "devDependencies": { diff --git a/src/index.css b/src/index.css index e1d1223..055a6c0 100644 --- a/src/index.css +++ b/src/index.css @@ -396,4 +396,25 @@ input::placeholder { @media print { nav, .print\:hidden { display: none !important; } +} +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + + 100% { + background-position: 200% 0; + } +} + +.skeleton-shimmer { + background: linear-gradient( + 90deg, + var(--color-surface-mid) 25%, + var(--color-surface-highest) 50%, + var(--color-surface-mid) 75% + ); + + background-size: 200% 100%; + animation: shimmer 1.5s linear infinite; } \ No newline at end of file diff --git a/src/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx index 771227f..201c516 100644 --- a/src/pages/AnalysisDashboard.tsx +++ b/src/pages/AnalysisDashboard.tsx @@ -1,3 +1,4 @@ +console.log("ANALYSIS DASHBOARD LOADED"); import { useEffect, useState } from 'react'; import { Link, useSearchParams } from 'react-router-dom'; import { ArrowLeft, AlertTriangle, Droplets, Eye as EyeIcon, Fish } from 'lucide-react'; @@ -19,8 +20,40 @@ function gradeColor(grade: string) { if (grade === 'B') return 'text-neon'; return 'text-error'; } +function ScanSkeleton() { + return ( +
+
+ +
+
+
+ + + +
+
+
+ +
+ +
+
+
+
+
+
+ + + +
+ +
+ ); +} export default function AnalysisDashboard() { + const [params] = useSearchParams(); const [scan, setScan] = useState(null); const [loading, setLoading] = useState(true); @@ -43,20 +76,16 @@ export default function AnalysisDashboard() { } catch (err) { setError(err instanceof Error ? err.message : 'Failed to load scan data.'); } finally { - setLoading(false); + setLoading(false); } } load(); }, [params]); // ── Loading state ──────────────────────────────────────────────────────── - if (loading) { - return ( -
- -
- ); - } +if (loading) { + return ; +} // ── Error state ────────────────────────────────────────────────────────── if (error || !scan) {