From c9d371644d361826c57a210699af1a2f6801695e Mon Sep 17 00:00:00 2001
From: debbie <deborahamoni0@gmail.com>
Date: Sat, 30 May 2026 16:45:40 +0000
Subject: [PATCH] feat: match skeleton loading states to ContractCard layout

---
 app/contracts/loading.tsx | 22 +++++++++++++++-------
 app/dashboard/loading.tsx | 22 ++++++++++++++++------
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/app/contracts/loading.tsx b/app/contracts/loading.tsx
index 373baa4..ca5e1ac 100644
--- a/app/contracts/loading.tsx
+++ b/app/contracts/loading.tsx
@@ -1,6 +1,7 @@
 export default function ContractsLoading() {
   return (
     <div className="space-y-6 animate-pulse">
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div className="space-y-2">
           <div className="h-7 w-28 bg-zinc-800 rounded" />
@@ -8,17 +9,24 @@ export default function ContractsLoading() {
         </div>
         <div className="h-9 w-32 bg-zinc-800 rounded-lg" />
       </div>
+
+      {/* Contract cards — mirrors ContractCard layout */}
       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        {[...Array(4)].map((_, i) => (
-          <div key={i} className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 space-y-3">
-            <div className="flex justify-between">
-              <div className="space-y-1.5">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
+            {/* label + network badge row */}
+            <div className="flex items-start justify-between gap-3 mb-3">
+              <div className="space-y-1.5 min-w-0">
                 <div className="h-4 w-32 bg-zinc-800 rounded" />
-                <div className="h-3 w-24 bg-zinc-800 rounded" />
+                <div className="h-3 w-36 bg-zinc-800 rounded" />
               </div>
-              <div className="h-5 w-16 bg-zinc-800 rounded" />
+              <div className="h-5 w-16 bg-zinc-800 rounded-full shrink-0" />
+            </div>
+            {/* rules count + last alert row */}
+            <div className="flex items-center justify-between">
+              <div className="h-3 w-16 bg-zinc-800 rounded" />
+              <div className="h-3 w-20 bg-zinc-800 rounded" />
             </div>
-            <div className="h-3 w-20 bg-zinc-800 rounded" />
           </div>
         ))}
       </div>
diff --git a/app/dashboard/loading.tsx b/app/dashboard/loading.tsx
index 65ddd07..d59e8ce 100644
--- a/app/dashboard/loading.tsx
+++ b/app/dashboard/loading.tsx
@@ -1,6 +1,7 @@
 export default function DashboardLoading() {
   return (
     <div className="space-y-8 animate-pulse">
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div className="space-y-2">
           <div className="h-7 w-32 bg-zinc-800 rounded" />
@@ -8,6 +9,8 @@ export default function DashboardLoading() {
         </div>
         <div className="h-9 w-32 bg-zinc-800 rounded-lg" />
       </div>
+
+      {/* Stats bar */}
       <div className="grid grid-cols-3 gap-4">
         {[...Array(3)].map((_, i) => (
           <div key={i} className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 space-y-2">
@@ -16,17 +19,24 @@ export default function DashboardLoading() {
           </div>
         ))}
       </div>
+
+      {/* Contract cards — mirrors ContractCard layout */}
       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {[...Array(3)].map((_, i) => (
-          <div key={i} className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 space-y-3">
-            <div className="flex justify-between">
-              <div className="space-y-1.5">
+          <div key={i} className="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
+            {/* label + network badge row */}
+            <div className="flex items-start justify-between gap-3 mb-3">
+              <div className="space-y-1.5 min-w-0">
                 <div className="h-4 w-32 bg-zinc-800 rounded" />
-                <div className="h-3 w-24 bg-zinc-800 rounded" />
+                <div className="h-3 w-36 bg-zinc-800 rounded" />
               </div>
-              <div className="h-5 w-16 bg-zinc-800 rounded" />
+              <div className="h-5 w-16 bg-zinc-800 rounded-full shrink-0" />
+            </div>
+            {/* rules count + last alert row */}
+            <div className="flex items-center justify-between">
+              <div className="h-3 w-16 bg-zinc-800 rounded" />
+              <div className="h-3 w-20 bg-zinc-800 rounded" />
             </div>
-            <div className="h-3 w-20 bg-zinc-800 rounded" />
           </div>
         ))}
       </div>