feat: loading spinners

frontend/src/routes/+page.svelte

@@ -1,8 +1,19 @@
 <script lang="ts">
   import '$lib/app.css';
   import GithubGraph from '$lib/components/graphs/github-graph.svelte';
-  import { githubData } from '$lib/services/api.svelte';
+  import { githubData, loadGithubData } from '$lib/services/api.svelte';
-  import { Card, CardBody, CardHeader, CardTitle, Container, Heading, HStack, Icon, Text } from '@immich/ui';
+  import {
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Container,
+    Heading,
+    HStack,
+    Icon,
+    LoadingSpinner,
+    Text,
+  } from '@immich/ui';
   import { mdiBugOutline, mdiMessageOutline, mdiSourceBranch, mdiStarOutline } from '@mdi/js';
   import uPlot from 'uplot';
   import 'uplot/dist/uPlot.min.css';
@@ -17,6 +28,8 @@
       key: 'sync',
     },
   };
+
+  const loading = loadGithubData();
 </script>
 
 <Container size="giant" center>
@@ -25,6 +38,17 @@
   </Heading>
   <Text color="muted">immich-app/immich</Text>
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
+    {#await loading}
+      {#each [1, 2, 3, 4] as _}
+        <Card class="animate-pulse">
+          <CardBody>
+            <div class="h-32 flex items-center justify-center">
+              <LoadingSpinner size="large" />
+            </div>
+          </CardBody>
+        </Card>
+      {/each}
+    {:then}
       <Card>
         <CardHeader>
           <CardTitle>
@@ -74,8 +98,15 @@
           </CardTitle>
         </CardHeader>
         <CardBody>
-        <GithubGraph color="purple" id="discussions-chart" data={githubData.discussions} {cursorOpts} label="Topics" />
+          <GithubGraph
+            color="purple"
+            id="discussions-chart"
+            data={githubData.discussions}
+            {cursorOpts}
+            label="Topics"
+          />
         </CardBody>
       </Card>
+    {/await}
   </div>
 </Container>

frontend/src/routes/+page.ts

@@ -1,9 +0,0 @@
-import { loadGithubData } from '$lib/services/api.svelte';
-
-export const ssr = false;
-
-export const load = async () => {
-  await loadGithubData();
-
-  return {};
-};