Show data loading status in admin menu

src/admin/AdminAppMenu.tsx

@@ -25,6 +25,7 @@ import IconFolder from '@/components/icons/IconFolder';
 import IconSignOut from '@/components/icons/IconSignOut';
 import IconLock from '@/components/icons/IconLock';
 import { IoMdCheckboxOutline } from 'react-icons/io';
+import Spinner from '@/components/Spinner';
 
 export default function AdminAppMenu({
   active,
@@ -40,6 +41,8 @@ export default function AdminAppMenu({
     uploadsCount = 0,
     tagsCount = 0,
     recipesCount = 0,
+    hasAdminData,
+    isLoadingAdminData,
     selectedPhotoIds,
     startUpload,
     setSelectedPhotoIds,
@@ -154,11 +157,18 @@ export default function AdminAppMenu({
   return (
     <MoreMenu
       header={<div className="flex items-center select-none">
-        <IconLock
+        <span className="inline-flex items-center justify-center w-5 mr-2">
-          size={15}
+          {!hasAdminData && isLoadingAdminData
-          className="inline-block w-5 mr-2"
+            ? <Spinner
-          narrow
+              className="translate-x-[1px] translate-y-[1px]"
-        />
+              size={13}
+            />
+            :<IconLock
+              size={16}
+              className="translate-x-[1px] translate-y-[0.5px]"
+              narrow
+            />}
+        </span>
         <span className="grow">Admin menu</span>
       </div>}
       icon={<div className={clsx(

src/cmdk/CommandKClient.tsx

@@ -127,6 +127,7 @@ export default function CommandKClient({
     clearAuthStateAndRedirectIfNecessary,
     isCommandKOpen: isOpen,
     startUpload,
+    photosCountTotal,
     photosCountHidden,
     uploadsCount,
     tagsCount,
@@ -465,20 +466,20 @@ export default function CommandKClient({
       });
     }
     adminSection.items.push({
-      label: 'Manage Photos',
+      label: `Manage Photos (${photosCountTotal})`,
       annotation: <IconLock narrow />,
       path: PATH_ADMIN_PHOTOS,
     });
     if (tagsCount) {
       adminSection.items.push({
-        label: 'Manage Tags',
+        label: `Manage Tags (${tagsCount})`,
         annotation: <IconLock narrow />,
         path: PATH_ADMIN_TAGS,
       });
     }
     if (recipesCount) {
       adminSection.items.push({
-        label: 'Manage Recipes',
+        label: `Manage Recipes (${recipesCount})`,
         annotation: <IconLock narrow />,
         path: PATH_ADMIN_RECIPES,
       });

src/state/AppState.ts

@@ -45,6 +45,8 @@ export type AppStateContextType = {
   isCheckingAuth?: boolean
   adminUpdateTimes?: Date[]
   registerAdminUpdate?: () => void
+  hasAdminData?: boolean
+  isLoadingAdminData?: boolean
   refreshAdminData?: () => void
   updateAdminData?: (updatedData: Partial<AdminData>) => void
   selectedPhotoIds?: string[]

src/state/AppStateProvider.tsx

@@ -129,7 +129,11 @@ export default function AppStateProvider({
   }, [auth, authError]);
   const isUserSignedIn = Boolean(userEmail);
 
-  const { data: adminData, mutate: refreshAdminData } = useSWR(
+  const {
+    data: adminData,
+    mutate: refreshAdminData,
+    isLoading: isLoadingAdminData,
+  } = useSWR(
     isUserSignedIn ? 'getAdminData' : null,
     getAdminDataAction,
   );
@@ -212,9 +216,11 @@ export default function AppStateProvider({
         // ADMIN
         adminUpdateTimes,
         registerAdminUpdate,
+        ...adminData,
+        hasAdminData: Boolean(adminData),
+        isLoadingAdminData,
         refreshAdminData,
         updateAdminData,
-        ...adminData,
         selectedPhotoIds,
         setSelectedPhotoIds,
         isPerformingSelectEdit,