From a9014dfeabf182f856ddf127a6724a95a1cbd093 Mon Sep 17 00:00:00 2001
From: Richard Chibuike <franklinrichard2007@gmail.com>
Date: Thu, 30 Jul 2026 12:45:22 +0100
Subject: [PATCH] fix: add loading boundary and distinguish empty vs loading on
 Study Groups page

---
 src/app/hooks/useStudyGroups.tsx | 16 ++++++++++++----
 src/app/pages/StudyGroups.tsx    | 15 ++++++++++++---
 src/app/study-groups/loading.tsx | 27 +++++++++++++++++++++++----
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/app/hooks/useStudyGroups.tsx b/src/app/hooks/useStudyGroups.tsx
index 318b5410..1b1851d9 100644
--- a/src/app/hooks/useStudyGroups.tsx
+++ b/src/app/hooks/useStudyGroups.tsx
@@ -142,6 +142,7 @@ function uid(prefix = 'id'): string {
 }
 
 export type UseStudyGroupsApi = {
+  loading: boolean;
   groups: StudyGroup[];
   messages: GroupMessage[];
   resources: GroupResource[];
@@ -208,6 +209,12 @@ export function useStudyGroups(currentUser?: { id: string; name: string }): UseS
     load(STORAGE_KEYS.certificates, [] as ForumCertificate[]),
   );
 
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(false);
+  }, []);
+
   const me = currentUser ?? { id: 'current-user', name: 'You' };
 
   const persistAll = useCallback(
@@ -265,11 +272,11 @@ export function useStudyGroups(currentUser?: { id: string; name: string }): UseS
         const { addNotification } = useNotificationStore.getState();
         addNotification({
           type: 'success',
-          message: `Created group “${group.name}”`,
+          message: `Created group “${group.name}”`,
           meta: { groupId: group.id },
         });
       } catch {}
-      toast.success(`Created group “${group.name}”`);
+      toast.success(`Created group “${group.name}”`);
       return group;
     },
     [me.id, me.name, triggerSync],
@@ -326,7 +333,7 @@ export function useStudyGroups(currentUser?: { id: string; name: string }): UseS
           meta: { groupId },
         });
       } catch {}
-      toast('Left group', { icon: '👋' });
+      toast('Left group', { icon: '👋' });
     },
     [me.id, triggerSync],
   );
@@ -588,6 +595,7 @@ export function useStudyGroups(currentUser?: { id: string; name: string }): UseS
   useMemo(() => persistAll(), [groups, messages, resources, challenges, certificates, persistAll]);
 
   return {
+    loading,
     groups,
     messages,
     resources,
@@ -609,4 +617,4 @@ export function useStudyGroups(currentUser?: { id: string; name: string }): UseS
     groupChallenges,
     challengeLeaderboard,
   };
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/StudyGroups.tsx b/src/app/pages/StudyGroups.tsx
index b6c6bf95..5fd183de 100644
--- a/src/app/pages/StudyGroups.tsx
+++ b/src/app/pages/StudyGroups.tsx
@@ -13,7 +13,7 @@ import { useStudyGroups } from '@/app/hooks/useStudyGroups';
 import NotificationBell from '@/app/components/notifications/NotificationBell';
 
 export default function StudyGroupsPage() {
-  const sg = useStudyGroups();
+  const { loading, ...sg } = useStudyGroups();
   const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [showCreateForm, setShowCreateForm] = useState(false);
@@ -107,7 +107,16 @@ export default function StudyGroupsPage() {
                 Groups ({filteredGroups.length})
               </h2>
             </div>
-            {filteredGroups.length === 0 ? (
+            {loading ? (
+              <div className="space-y-3">
+                {[1, 2, 3].map((i) => (
+                  <div
+                    key={i}
+                    className="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"
+                  />
+                ))}
+              </div>
+            ) : filteredGroups.length === 0 ? (
               <div className="text-center py-8 text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
                 <Users size={48} className="mx-auto mb-2 text-gray-300 dark:text-gray-600" />
                 <p className="text-sm">
@@ -323,4 +332,4 @@ function CreateGroupForm({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/study-groups/loading.tsx b/src/app/study-groups/loading.tsx
index 911833a5..982e5f03 100644
--- a/src/app/study-groups/loading.tsx
+++ b/src/app/study-groups/loading.tsx
@@ -1,5 +1,24 @@
-import { ServerlessPageSkeleton } from '@/components/ui/ServerlessSkeleton';
-
 export default function StudyGroupsLoading() {
-  return <ServerlessPageSkeleton variant="generic" label="Loading study groups" />;
-}
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="container mx-auto px-4 py-8">
+        <div className="animate-pulse">
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-2" />
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-6" />
+          <div className="h-12 bg-gray-200 dark:bg-gray-700 rounded mb-6" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-40 mb-6" />
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="space-y-3">
+              <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-2" />
+              <div className="h-32 bg-gray-200 dark:bg-gray-700 rounded" />
+              <div className="h-32 bg-gray-200 dark:bg-gray-700 rounded" />
+            </div>
+            <div className="lg:col-span-2">
+              <div className="h-64 bg-gray-200 dark:bg-gray-700 rounded" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file