Changed light mode icon because it was misleading

frontend/__tests__/unit/components/ModeToggle.test.tsx

@@ -52,7 +52,7 @@ describe('ModeToggle Component', () => {
     const button = screen.getByRole('button', { name: /enable light mode/i })
     expect(button).toBeInTheDocument()
 
-    const icon = document.querySelector('[data-icon="sun"]')
+    const icon = document.querySelector('[data-icon="lightbulb"]')
     expect(icon).toBeInTheDocument()
   })
 

frontend/__tests__/unit/pages/Home.test.tsx

@@ -275,13 +275,18 @@ describe('Home', () => {
       for (const header of headers) {
         expect(screen.getByText(header)).toBeInTheDocument()
       }
-      // Wait for 2 seconds
-      setTimeout(() => {
+    })
+
+    // Wait for animated counters to complete (2 seconds animation)
+    // Note: The "+" is rendered separately from the number, so we check for the number only
+    await waitFor(
+      () => {
         for (const value of Object.values(stats)) {
-          expect(screen.getByText(`${millify(value)}+`)).toBeInTheDocument()
+          expect(screen.getByText(millify(value), { exact: false })).toBeInTheDocument()
         }
-      }, 2000)
-    })
+      },
+      { timeout: 3000 }
+    )
   })
 
   test('renders event details including date range and location', async () => {

frontend/__tests__/unit/pages/Snapshots.test.tsx

@@ -59,8 +59,8 @@ describe('SnapshotsPage', () => {
     render(<SnapshotsPage />)
 
     await waitFor(() => {
-      const loadingSpinners = screen.getAllByAltText('Loading indicator')
-      expect(loadingSpinners.length).toBe(2)
+      const loadingSkeletons = screen.getAllByRole('status')
+      expect(loadingSkeletons.length).toBeGreaterThan(0)
     })
   })
 

frontend/src/app/snapshots/page.tsx

@@ -6,7 +6,7 @@
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import { GetCommunitySnapshotsDocument } from 'types/__generated__/snapshotQueries.generated'
 import type { Snapshot } from 'types/snapshot'
-import LoadingSpinner from 'components/LoadingSpinner'
+import SnapshotSkeleton from 'components/skeletons/SnapshotSkeleton'
 import SnapshotCard from 'components/SnapshotCard'
 
 const SnapshotsPage: React.FC = () => {
@@ -41,7 +41,7 @@
 
   const renderSnapshotCard = (snapshot: Snapshot) => {
     const SubmitButton = {
-      label: 'View Details',
+      label: 'View Snapshot',
       icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
       onclick: () => handleButtonClick(snapshot),
     }
@@ -57,22 +57,26 @@
     )
   }
 
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
   return (
     <div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
       <div className="text-text flex min-h-screen w-full flex-col items-center justify-normal p-5">
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          {!snapshots?.length ? (
-            <div className="col-span-full py-8 text-center">No Snapshots found</div>
-          ) : (
-            snapshots.map((snapshot: Snapshot) => (
-              <div key={snapshot.key}>{renderSnapshotCard(snapshot)}</div>
-            ))
-          )}
-        </div>
+        {isLoading ? (
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {Array.from({ length: 12 }).map((_, index) => (
+              <SnapshotSkeleton key={index} />
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {!snapshots?.length ? (
+              <div className="col-span-full py-8 text-center">No Snapshots found</div>
+            ) : (
+              snapshots.map((snapshot: Snapshot) => (
+                <div key={snapshot.key}>{renderSnapshotCard(snapshot)}</div>
+              ))
+            )}
+          </div>
+        )}
       </div>
     </div>
   )

frontend/src/components/ModeToggle.tsx

@@ -1,4 +1,4 @@
-import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons'
+import { faMoon, faLightbulb } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { Tooltip } from '@heroui/tooltip'
@@ -28,7 +28,7 @@ export default function ModeToggle() {
         >
           <div className="absolute inset-0 flex items-center justify-center">
             <FontAwesomeIcon
-              icon={theme === 'dark' ? faSun : faMoon}
+              icon={theme === 'dark' ? faLightbulb : faMoon}
               className="h-5 w-5 transform text-gray-900 transition-all duration-300 hover:rotate-12 dark:text-gray-100"
               fixedWidth
             />

frontend/src/components/SkeletonsBase.tsx

@@ -1,19 +1,32 @@
 import { Skeleton } from '@heroui/skeleton'
 import LoadingSpinner from 'components/LoadingSpinner'
 import CardSkeleton from 'components/skeletons/Card'
+import SnapshotSkeleton from 'components/skeletons/SnapshotSkeleton'
 import UserCardSkeleton from 'components/skeletons/UserCard'
 
 function userCardRender() {
   const cardCount = 12
   return (
     <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {Array.from({ length: cardCount }).map((_, index) => (
-        <UserCardSkeleton key={index} />
+        <UserCardSkeleton key={`user-skeleton-${index}`} />
       ))}
     </div>
   )
 }
 
+function snapshotCardRender() {
+  const cardCount = 12
+  return (
+    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      {Array.from({ length: cardCount }).map((_, index) => (
+        <SnapshotSkeleton key={`snapshot-skeleton-${index}`} />
+      ))}
+    </div>
+  )
+}
+
+
 const SkeletonBase = ({
   indexName,
   loadingImageUrl,
@@ -49,6 +62,12 @@
       break
     case 'users':
       return userCardRender()
+
+    case 'organizations':
+      return userCardRender()
+    case 'snapshots':
+      return snapshotCardRender()
+
     default:
       return <LoadingSpinner imageUrl={loadingImageUrl} />
   }