From 61f2393431bf2ba804ea0e121b436da8e4f886b1 Mon Sep 17 00:00:00 2001
From: Mohammed Rayan A <mohammedrayan9064@gmail.com>
Date: Sun, 19 Jul 2026 00:25:35 +0530
Subject: [PATCH] feat: implement inline shimmer skeleton loading states

---
 app/components/Dashboard.tsx           | 19 +++++-----
 app/components/ui/ResourceSkeleton.tsx | 52 ++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 app/components/ui/ResourceSkeleton.tsx

diff --git a/app/components/Dashboard.tsx b/app/components/Dashboard.tsx
index 889fd7a..60bca3a 100644
--- a/app/components/Dashboard.tsx
+++ b/app/components/Dashboard.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Edit, ExternalLink, FolderPlus, Globe, Loader2, Lock, MoreHorizontal, Search, Trash2, Sparkles } from 'lucide-react'
+import { Edit, ExternalLink, FolderPlus, Globe, Lock, MoreHorizontal, Search, Trash2, Sparkles } from 'lucide-react'
 import { Tooltip } from 'react-tooltip'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useAuth } from '../contexts/AuthContext'
@@ -9,6 +9,7 @@ import { authFetch } from '../lib/authFetch'
 import { CollectionsSidebar } from './collections/CollectionsSidebar'
 import { ResourceCollectionManager } from './collections/ResourceCollectionManager'
 import { EditResource } from './EditResource'
+import { ResourceSkeleton } from './ui/ResourceSkeleton'
 
 function formatDate(dateValue: any): string {
   if (!dateValue) return ''
@@ -126,13 +127,7 @@ export function Dashboard({ onNavigate }: { onNavigate?: (page: 'dashboard' | 'a
     }
   }
 
-  if (loading) {
-    return (
-      <div className="flex h-64 items-center justify-center">
-        <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
-      </div>
-    )
-  }
+  // We render inline skeletons inside the feed area below rather than block the entire dashboard UI
 
   return (
     <>
@@ -220,7 +215,13 @@ export function Dashboard({ onNavigate }: { onNavigate?: (page: 'dashboard' | 'a
               </div>
             </div>
 
-            {resources.length === 0 ? (
+            {loading ? (
+              <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                {Array.from({ length: 6 }).map((_, idx) => (
+                  <ResourceSkeleton key={idx} />
+                ))}
+              </div>
+            ) : resources.length === 0 ? (
               <div className="app-panel p-8 md:p-10 space-y-6">
                 <div className="flex items-center gap-3">
                   <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
diff --git a/app/components/ui/ResourceSkeleton.tsx b/app/components/ui/ResourceSkeleton.tsx
new file mode 100644
index 0000000..4e61bf8
--- /dev/null
+++ b/app/components/ui/ResourceSkeleton.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { MoreHorizontal } from 'lucide-react'
+
+export function ResourceSkeleton() {
+  return (
+    <div className="app-panel p-4 space-y-4 animate-pulse border border-slate-200/60 dark:border-slate-800/60">
+      {/* Card Header Chips */}
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-2">
+          {/* Tag Chip */}
+          <div className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-800" />
+          {/* Index Status Chip */}
+          <div className="h-6 w-14 rounded-full bg-slate-200 dark:bg-slate-800" />
+          {/* Visibility Chip */}
+          <div className="flex h-6 w-16 items-center gap-1 rounded-full bg-slate-200 px-2 dark:bg-slate-800" />
+        </div>
+        
+        {/* Actions Button Skeleton */}
+        <div className="rounded-lg p-2 text-slate-200 dark:text-slate-800">
+          <MoreHorizontal className="h-5 w-5 opacity-40" />
+        </div>
+      </div>
+
+      {/* Resource Title */}
+      <div className="space-y-2">
+        <div className="h-5 w-11/12 rounded bg-slate-200 dark:bg-slate-800" />
+        <div className="h-5 w-2/3 rounded bg-slate-200 dark:bg-slate-800" />
+      </div>
+
+      {/* Note Content */}
+      <div className="space-y-1.5 pt-1">
+        <div className="h-4 w-full rounded bg-slate-100 dark:bg-slate-900" />
+        <div className="h-4 w-5/6 rounded bg-slate-100 dark:bg-slate-900" />
+      </div>
+
+      {/* Collection Chips */}
+      <div className="flex flex-wrap gap-2 pt-2">
+        <div className="h-5 w-20 rounded bg-slate-200 dark:bg-slate-800" />
+        <div className="h-5 w-24 rounded bg-slate-200 dark:bg-slate-800" />
+      </div>
+
+      {/* Card Footer */}
+      <div className="flex items-center justify-between border-t border-slate-100 pt-3 text-xs dark:border-slate-800/80">
+        {/* Date skeleton */}
+        <div className="h-3 w-16 rounded bg-slate-200 dark:bg-slate-800" />
+        {/* Open link skeleton */}
+        <div className="h-4 w-12 rounded bg-slate-200 dark:bg-slate-800" />
+      </div>
+    </div>
+  )
+}