From b550992e0f3a6836f5240597f054e043b32a1db4 Mon Sep 17 00:00:00 2001
From: Shambavi <pvshambavi@gmail.com>
Date: Wed, 27 May 2026 13:01:24 +0530
Subject: [PATCH 1/4] feat(dashboard): add AIInsights loading skeleton

---
 app/(root)/dashboard/loading.tsx            |  3 ++-
 components/dashboard/AIInsightsSkeleton.tsx | 26 +++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 components/dashboard/AIInsightsSkeleton.tsx

diff --git a/app/(root)/dashboard/loading.tsx b/app/(root)/dashboard/loading.tsx
index ef9d24dd..11e26173 100644
--- a/app/(root)/dashboard/loading.tsx
+++ b/app/(root)/dashboard/loading.tsx
@@ -1,5 +1,6 @@
 import StatsCardSkeleton from '@/components/dashboard/StatsCardSkeleton';
 import AchievementsSkeleton from '@/components/dashboard/AchievementsSkeleton';
+import AIInsightsSkeleton from '@/components/dashboard/AIInsightsSkeleton';
 
 export default function DashboardLoading() {
   return (
@@ -40,7 +41,7 @@ export default function DashboardLoading() {
           <div className="h-24 rounded-2xl shimmer border border-white/10" />
           <div className="h-24 rounded-2xl shimmer border border-white/10" />
           <div className="h-24 rounded-2xl shimmer border border-white/10" />
-          <div className="h-48 rounded-2xl shimmer border border-white/10" />
+          <AIInsightsSkeleton />
         </div>
       </div>
     </div>
diff --git a/components/dashboard/AIInsightsSkeleton.tsx b/components/dashboard/AIInsightsSkeleton.tsx
new file mode 100644
index 00000000..e9e5d46d
--- /dev/null
+++ b/components/dashboard/AIInsightsSkeleton.tsx
@@ -0,0 +1,26 @@
+export default function AIInsightsSkeleton() {
+  return (
+    <div className="p-6 rounded-xl bg-white dark:bg-[#0a0a0a] border border-black/10 dark:border-[rgba(255,255,255,0.08)] relative">
+      <div className="flex items-center gap-2.5 mb-5">
+        <div className="w-4 h-4 shimmer rounded-full" />
+        <div className="w-24 h-4 shimmer rounded" />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {[...Array(3)].map((_, i) => (
+          <div
+            key={i}
+            className="flex items-start gap-3 p-3 rounded-lg bg-gray-100 dark:bg-[#111] border border-black/10 dark:border-[rgba(255,255,255,0.05)]"
+          >
+            <div className="w-4 h-4 shimmer rounded-full mt-0.5 shrink-0" />
+
+            <div className="flex-1 space-y-2">
+              <div className="h-3 shimmer rounded w-full" />
+              <div className="h-3 shimmer rounded w-5/6" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

From a6efaf3e90ff1834581a06b9f5326bf4ae19f779 Mon Sep 17 00:00:00 2001
From: Shambavi <pvshambavi@gmail.com>
Date: Thu, 28 May 2026 19:35:45 +0530
Subject: [PATCH 2/4] style(dashboard): improve dark skeleton loading UI

---
 app/(root)/dashboard/loading.tsx            |  4 +-
 app/globals.css                             |  1 +
 components/dashboard/AIInsights.tsx         | 66 +++++++--------------
 components/dashboard/AIInsightsSkeleton.tsx | 22 ++++---
 components/dashboard/StatsCardSkeleton.tsx  |  2 +-
 5 files changed, 40 insertions(+), 55 deletions(-)

diff --git a/app/(root)/dashboard/loading.tsx b/app/(root)/dashboard/loading.tsx
index 11e26173..c75d3c34 100644
--- a/app/(root)/dashboard/loading.tsx
+++ b/app/(root)/dashboard/loading.tsx
@@ -4,7 +4,7 @@ import AIInsightsSkeleton from '@/components/dashboard/AIInsightsSkeleton';
 
 export default function DashboardLoading() {
   return (
-    <div className="p-4 md:p-6 lg:p-8 min-h-screen">
+    <div className="p-4 md:p-6 lg:p-8 min-h-screen bg-black text-white">
       <div className="grid grid-cols-1 lg:grid-cols-[300px_1fr_320px] gap-6 lg:gap-8">
         {/* Left Sidebar Skeleton */}
         <div className="flex flex-col gap-6">
@@ -37,7 +37,7 @@ export default function DashboardLoading() {
         </div>
 
         {/* Right Sidebar Skeleton */}
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-6">
           <div className="h-24 rounded-2xl shimmer border border-white/10" />
           <div className="h-24 rounded-2xl shimmer border border-white/10" />
           <div className="h-24 rounded-2xl shimmer border border-white/10" />
diff --git a/app/globals.css b/app/globals.css
index 0dec0630..7af8ecdc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -53,6 +53,7 @@
 }
 
 .shimmer {
+  background-color: #1a1a1a; /* base dark gray */
   background: linear-gradient(
     90deg,
     rgba(255, 255, 255, 0) 0%,
diff --git a/components/dashboard/AIInsights.tsx b/components/dashboard/AIInsights.tsx
index 3203a8ab..e8370d3e 100644
--- a/components/dashboard/AIInsights.tsx
+++ b/components/dashboard/AIInsights.tsx
@@ -1,50 +1,30 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { Sparkles, Moon, Sun, Zap, Calendar, Flame, Code, Star, LucideIcon } from 'lucide-react';
-import { AIInsight } from '@/types/dashboard';
-
-const iconMap: Record<string, LucideIcon> = { Moon, Sun, Zap, Calendar, Flame, Code, Star };
-
-export default function AIInsights({ insights }: { insights: AIInsight[] }) {
+export default function AIInsightsSkeleton() {
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 12 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.3 }}
-      className="p-6 rounded-xl bg-white dark:bg-[#0a0a0a] border border-black/10 dark:border-[rgba(255,255,255,0.08)] relative"
-    >
+    <div className="p-6 rounded-xl bg-[#0a0a0a] border border-[rgba(255,255,255,0.08)]">
+      {/* Header */}
       <div className="flex items-center gap-2.5 mb-5">
-        <Sparkles size={15} className="text-[#A1A1AA]" />
-        <h3 className="text-sm font-semibold text-gray-900 dark:text-white tracking-tight">
-          AI Insights
-        </h3>
+        <div className="w-4 h-4 shimmer rounded-full opacity-80" />
+        <div className="w-24 h-4 shimmer rounded opacity-80" />
       </div>
 
-      <div className="flex flex-col gap-2">
-        {insights.map((insight, i) => {
-          const Icon = iconMap[insight.icon] || Sparkles;
-          return (
-            <motion.div
-              key={insight.id}
-              initial={{ opacity: 0, x: -8 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.1 + i * 0.07, duration: 0.2 }}
-              className="flex items-start gap-3 p-3 rounded-lg bg-gray-100 dark:bg-[#111] border border-black/10 dark:border-[rgba(255,255,255,0.05)] hover:border-black/20 dark:hover:border-[rgba(255,255,255,0.1)] hover:bg-gray-200 dark:hover:bg-[#141414] transition-all duration-200 group"
-            >
-              <Icon
-                size={14}
-                className="text-[#A1A1AA] mt-0.5 shrink-0 group-hover:text-white transition-colors duration-200"
-              />
-              <p className="text-xs xs:text-sm  text-[#A1A1AA] leading-relaxed group-hover:text-white/80 transition-colors duration-200">
-                {insight.text}
-              </p>
-            </motion.div>
-          );
-        })}
+      {/* Insight Rows */}
+      <div className="flex flex-col gap-6">
+        {[...Array(3)].map((_, i) => (
+          <div
+            key={i}
+            className="flex items-start gap-3 p-3 rounded-lg bg-[#111] border border-[rgba(255,255,255,0.05)]"
+          >
+            {/* Icon */}
+            <div className="w-4 h-4 shimmer rounded-full mt-1 shrink-0 opacity-80" />
+
+            {/* Text */}
+            <div className="flex-1 space-y-2">
+              <div className="h-3 shimmer rounded w-full opacity-80" />
+              <div className="h-3 shimmer rounded w-4/5 opacity-60" />
+            </div>
+          </div>
+        ))}
       </div>
-    </motion.div>
+    </div>
   );
 }
diff --git a/components/dashboard/AIInsightsSkeleton.tsx b/components/dashboard/AIInsightsSkeleton.tsx
index e9e5d46d..ac3b9026 100644
--- a/components/dashboard/AIInsightsSkeleton.tsx
+++ b/components/dashboard/AIInsightsSkeleton.tsx
@@ -1,22 +1,26 @@
 export default function AIInsightsSkeleton() {
   return (
-    <div className="p-6 rounded-xl bg-white dark:bg-[#0a0a0a] border border-black/10 dark:border-[rgba(255,255,255,0.08)] relative">
-      <div className="flex items-center gap-2.5 mb-5">
-        <div className="w-4 h-4 shimmer rounded-full" />
-        <div className="w-24 h-4 shimmer rounded" />
+    <div className="p-6 rounded-2xl bg-[#111111] border border-white/10">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-5">
+        <div className="w-5 h-5 shimmer rounded-full" />
+        <div className="w-28 h-4 shimmer rounded-md" />
       </div>
 
-      <div className="flex flex-col gap-2">
+      {/* Insight Cards */}
+      <div className="flex flex-col gap-6">
         {[...Array(3)].map((_, i) => (
           <div
             key={i}
-            className="flex items-start gap-3 p-3 rounded-lg bg-gray-100 dark:bg-[#111] border border-black/10 dark:border-[rgba(255,255,255,0.05)]"
+            className="flex items-start gap-3 p-4 rounded-xl bg-[#181818] border border-white/5"
           >
-            <div className="w-4 h-4 shimmer rounded-full mt-0.5 shrink-0" />
+            {/* Icon */}
+            <div className="w-5 h-5 shimmer rounded-full shrink-0 mt-1" />
 
+            {/* Text */}
             <div className="flex-1 space-y-2">
-              <div className="h-3 shimmer rounded w-full" />
-              <div className="h-3 shimmer rounded w-5/6" />
+              <div className="h-3 shimmer rounded-md w-full" />
+              <div className="h-3 shimmer rounded-md w-4/5" />
             </div>
           </div>
         ))}
diff --git a/components/dashboard/StatsCardSkeleton.tsx b/components/dashboard/StatsCardSkeleton.tsx
index b18ce42d..614529c1 100644
--- a/components/dashboard/StatsCardSkeleton.tsx
+++ b/components/dashboard/StatsCardSkeleton.tsx
@@ -5,7 +5,7 @@ export default function StatsCardSkeleton() {
   const heights = [24, 32, 18, 45, 38, 52, 28, 42, 35, 48, 30, 22];
 
   return (
-    <div className="p-6 rounded-xl bg-white dark:bg-[#0a0a0a]border border-[rgba(255,255,255,0.08)] overflow-hidden">
+    <div className="p-6 rounded-xl bg-white dark:bg-[#0a0a0a] border border-[rgba(255,255,255,0.08)] overflow-hidden">
       <div className="flex justify-between items-start mb-6">
         <div className="space-y-3">
           <div className="h-3 w-24 shimmer rounded" />

From fb515c20c9eea37503f334ec7f77a4bcd8442acb Mon Sep 17 00:00:00 2001
From: Shambavi <pvshambavi@gmail.com>
Date: Thu, 28 May 2026 22:06:04 +0530
Subject: [PATCH 3/4] fix(dashboard): restore AIInsights component

---
 components/dashboard/AIInsights.tsx         | 66 ++++++++++++++-------
 components/dashboard/AIInsightsSkeleton.tsx | 18 +++---
 2 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/components/dashboard/AIInsights.tsx b/components/dashboard/AIInsights.tsx
index e8370d3e..1793b483 100644
--- a/components/dashboard/AIInsights.tsx
+++ b/components/dashboard/AIInsights.tsx
@@ -1,30 +1,52 @@
-export default function AIInsightsSkeleton() {
+'use client';
+
+import { motion } from 'framer-motion';
+import { Sparkles, Moon, Sun, Zap, Calendar, Flame, Code, Star, LucideIcon } from 'lucide-react';
+import { AIInsight } from '@/types/dashboard';
+
+const iconMap: Record<string, LucideIcon> = { Moon, Sun, Zap, Calendar, Flame, Code, Star };
+
+export default function AIInsights({ insights }: { insights: AIInsight[] }) {
   return (
-    <div className="p-6 rounded-xl bg-[#0a0a0a] border border-[rgba(255,255,255,0.08)]">
-      {/* Header */}
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.3 }}
+      className="p-6 rounded-xl bg-white dark:bg-[#0a0a0a] border border-black/10 dark:border-[rgba(255,255,255,0.08)] relative"
+    >
       <div className="flex items-center gap-2.5 mb-5">
-        <div className="w-4 h-4 shimmer rounded-full opacity-80" />
-        <div className="w-24 h-4 shimmer rounded opacity-80" />
+        <Sparkles size={15} className="text-[#A1A1AA]" />
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-white tracking-tight">
+          AI Insights
+        </h3>
       </div>
 
-      {/* Insight Rows */}
       <div className="flex flex-col gap-6">
-        {[...Array(3)].map((_, i) => (
-          <div
-            key={i}
-            className="flex items-start gap-3 p-3 rounded-lg bg-[#111] border border-[rgba(255,255,255,0.05)]"
-          >
-            {/* Icon */}
-            <div className="w-4 h-4 shimmer rounded-full mt-1 shrink-0 opacity-80" />
+        {insights.map((insight, i) => {
+          const Icon = iconMap[insight.icon] || Sparkles;
+
+          return (
+            <motion.div
+              key={insight.id}
+              initial={{ opacity: 0, x: -8 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.1 + i * 0.07, duration: 0.2 }}
+              className="flex items-start gap-3 p-3 rounded-lg bg-gray-100 dark:bg-[#111] border border-black/10 dark:border-[rgba(255,255,255,0.05)] hover:border-black/20 dark:hover:border-[rgba(255,255,255,0.1)] hover:bg-gray-200 dark:hover:bg-[#141414] transition-all duration-200 group"
+            >
+              <Icon
+                size={14}
+                className="text-[#A1A1AA] mt-0.5 shrink-0 group-hover:text-white transition-colors duration-200"
+              />
 
-            {/* Text */}
-            <div className="flex-1 space-y-2">
-              <div className="h-3 shimmer rounded w-full opacity-80" />
-              <div className="h-3 shimmer rounded w-4/5 opacity-60" />
-            </div>
-          </div>
-        ))}
+              <p className="text-xs xs:text-sm text-[#A1A1AA] leading-relaxed group-hover:text-white/80 transition-colors duration-200">
+                {insight.text}
+              </p>
+            </motion.div>
+          );
+        })}
       </div>
-    </div>
+    </motion.div>
   );
-}
+}
\ No newline at end of file
diff --git a/components/dashboard/AIInsightsSkeleton.tsx b/components/dashboard/AIInsightsSkeleton.tsx
index ac3b9026..e8370d3e 100644
--- a/components/dashboard/AIInsightsSkeleton.tsx
+++ b/components/dashboard/AIInsightsSkeleton.tsx
@@ -1,26 +1,26 @@
 export default function AIInsightsSkeleton() {
   return (
-    <div className="p-6 rounded-2xl bg-[#111111] border border-white/10">
+    <div className="p-6 rounded-xl bg-[#0a0a0a] border border-[rgba(255,255,255,0.08)]">
       {/* Header */}
-      <div className="flex items-center gap-3 mb-5">
-        <div className="w-5 h-5 shimmer rounded-full" />
-        <div className="w-28 h-4 shimmer rounded-md" />
+      <div className="flex items-center gap-2.5 mb-5">
+        <div className="w-4 h-4 shimmer rounded-full opacity-80" />
+        <div className="w-24 h-4 shimmer rounded opacity-80" />
       </div>
 
-      {/* Insight Cards */}
+      {/* Insight Rows */}
       <div className="flex flex-col gap-6">
         {[...Array(3)].map((_, i) => (
           <div
             key={i}
-            className="flex items-start gap-3 p-4 rounded-xl bg-[#181818] border border-white/5"
+            className="flex items-start gap-3 p-3 rounded-lg bg-[#111] border border-[rgba(255,255,255,0.05)]"
           >
             {/* Icon */}
-            <div className="w-5 h-5 shimmer rounded-full shrink-0 mt-1" />
+            <div className="w-4 h-4 shimmer rounded-full mt-1 shrink-0 opacity-80" />
 
             {/* Text */}
             <div className="flex-1 space-y-2">
-              <div className="h-3 shimmer rounded-md w-full" />
-              <div className="h-3 shimmer rounded-md w-4/5" />
+              <div className="h-3 shimmer rounded w-full opacity-80" />
+              <div className="h-3 shimmer rounded w-4/5 opacity-60" />
             </div>
           </div>
         ))}

From 39311058d3a7177c53e8a1771ebd419f603fd9ba Mon Sep 17 00:00:00 2001
From: Shambavi <pvshambavi@gmail.com>
Date: Thu, 28 May 2026 22:08:54 +0530
Subject: [PATCH 4/4] style(dashboard): format AI insights components

---
 components/dashboard/AIInsights.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/AIInsights.tsx b/components/dashboard/AIInsights.tsx
index 1793b483..2f03ba92 100644
--- a/components/dashboard/AIInsights.tsx
+++ b/components/dashboard/AIInsights.tsx
@@ -49,4 +49,4 @@ export default function AIInsights({ insights }: { insights: AIInsight[] }) {
       </div>
     </motion.div>
   );
-}
\ No newline at end of file
+}