From dad03ec5710ac27d8e9b4342e60480116b5686d8 Mon Sep 17 00:00:00 2001
From: kushwahnihal25-rgb <kushwahnihal25@gmail.com>
Date: Fri, 12 Jun 2026 18:36:36 +0530
Subject: [PATCH] Add shimmer loading skeleton for analysis dashboard

---
 src/components/shared/ScanSkeleton.tsx | 33 ++++++++++++++++++++++++++
 src/index.css                          | 21 ++++++++++++++++
 src/pages/AnalysisDashboard.tsx        | 14 +++++------
 3 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 src/components/shared/ScanSkeleton.tsx

diff --git a/src/components/shared/ScanSkeleton.tsx b/src/components/shared/ScanSkeleton.tsx
new file mode 100644
index 0000000..60559fd
--- /dev/null
+++ b/src/components/shared/ScanSkeleton.tsx
@@ -0,0 +1,33 @@
+import GlassCard from "../GlassCard";
+export default function ScanSkeleton()  {
+  return (
+    <div className="p-6 space-y-6 animate-pulse">
+      <div className="flex flex-col md:flex-row gap-6">
+        <GlassCard className="flex-1 p-8">
+          <div className="h-4 w-32 skeleton-shimmer rounded mb-4"></div>
+          <div className="h-16 w-40 skeleton-shimmer rounded mb-4"></div>
+          <div className="h-2 w-full skeleton-shimmer rounded"></div>
+        </GlassCard>
+
+        <GlassCard className="md:w-72 p-6">
+          <div className="h-4 w-24 skeleton-shimmer rounded mb-4"></div>
+          <div className="h-8 w-full skeleton-shimmer rounded mb-3"></div>
+          <div className="h-8 w-full skeleton-shimmer rounded"></div>
+        </GlassCard>
+      </div>
+
+      <GlassCard className="p-6">
+        <div className="h-5 w-40 skeleton-shimmer rounded mb-4"></div>
+        <div className="space-y-3">
+          <div className="h-16 skeleton-shimmer rounded"></div>
+          <div className="h-16 skeleton-shimmer rounded"></div>
+          <div className="h-16 skeleton-shimmer rounded"></div>
+        </div>
+      </GlassCard>
+
+      <GlassCard className="p-4">
+        <div className="h-12 skeleton-shimmer rounded"></div>
+      </GlassCard>
+    </div>
+  );
+}
\ No newline at end of file
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..dd4eca6 100644
--- a/src/pages/AnalysisDashboard.tsx
+++ b/src/pages/AnalysisDashboard.tsx
@@ -5,6 +5,7 @@ import GlassCard from '../components/GlassCard';
 import StatusTerminal from '../components/StatusTerminal';
 import { api } from '../lib/api';
 import type { ScanResult } from '../lib/types';
+import ScanSkeleton from "../components/shared/ScanSkeleton";
 
 const BIOMARKER_META = {
   gill_saturation: { label: 'Gill Saturation', icon: Droplets },
@@ -21,6 +22,7 @@ function gradeColor(grade: string) {
 }
 
 export default function AnalysisDashboard() {
+ 
   const [params] = useSearchParams();
   const [scan, setScan] = useState<ScanResult | null>(null);
   const [loading, setLoading] = useState(true);
@@ -43,20 +45,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 (
-      <div className="min-h-[calc(100vh-4rem)] flex items-center justify-center">
-        <StatusTerminal messages={['LOADING_ANALYSIS...', 'FETCHING_RESULT']} />
-      </div>
-    );
-  }
+if (loading) {
+  return <ScanSkeleton />;
+}
 
   // ── Error state ──────────────────────────────────────────────────────────
   if (error || !scan) {