From 468c1235dd4316add2242f553be044a7637e222e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 25 Feb 2026 20:02:21 +0000
Subject: [PATCH] [jules] ux: Complete skeleton loading system for Friends page

Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
---
 web/components/skeletons/FriendsSkeleton.tsx | 40 ++++++++++++++++++++
 web/pages/Friends.tsx                        |  5 +++
 2 files changed, 45 insertions(+)
 create mode 100644 web/components/skeletons/FriendsSkeleton.tsx

diff --git a/web/components/skeletons/FriendsSkeleton.tsx b/web/components/skeletons/FriendsSkeleton.tsx
new file mode 100644
index 00000000..3f16b08b
--- /dev/null
+++ b/web/components/skeletons/FriendsSkeleton.tsx
@@ -0,0 +1,40 @@
+import { Card } from '../ui/Card';
+import { Skeleton } from '../ui/Skeleton';
+
+export const FriendsSkeleton = () => {
+  return (
+    <div className="p-4 md:p-6 max-w-7xl mx-auto space-y-8 min-h-screen">
+      {/* Header Skeleton */}
+      <div className="relative overflow-hidden rounded-3xl h-48 md:h-64 w-full">
+        <Skeleton className="w-full h-full" />
+      </div>
+
+      {/* Summary Cards Skeleton */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {[1, 2].map((i) => (
+          <Card key={i} className="flex items-center justify-between p-6 h-32">
+            <div>
+               <Skeleton className="w-32 h-4 mb-2" />
+               <Skeleton className="w-24 h-8" />
+            </div>
+            <Skeleton className="w-12 h-12 rounded-full" />
+          </Card>
+        ))}
+      </div>
+
+      {/* Friends Grid Skeleton */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <Card key={i} className="flex flex-col p-6 h-64">
+             <div className="flex justify-between items-start mb-4">
+                <Skeleton className="w-14 h-14 rounded-full" />
+                <Skeleton className="w-20 h-6 rounded-full" />
+             </div>
+             <Skeleton className="w-32 h-8 mb-2" />
+             <Skeleton className="w-24 h-8" />
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/web/pages/Friends.tsx b/web/pages/Friends.tsx
index 039eb5db..62810544 100644
--- a/web/pages/Friends.tsx
+++ b/web/pages/Friends.tsx
@@ -1,6 +1,7 @@
 import { AnimatePresence, motion } from 'framer-motion';
 import { ArrowRight, Search, TrendingDown, TrendingUp, Users } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { FriendsSkeleton } from '../components/skeletons/FriendsSkeleton';
 import { EmptyState } from '../components/ui/EmptyState';
 import { THEMES } from '../constants';
 import { useTheme } from '../contexts/ThemeContext';
@@ -119,6 +120,10 @@ export const Friends = () => {
 
   const isNeo = style === THEMES.NEOBRUTALISM;
 
+  if (loading) {
+    return <FriendsSkeleton />;
+  }
+
   return (
     <div className="p-4 md:p-6 max-w-7xl mx-auto space-y-8 min-h-screen">
       {/* Immersive Header */}