src/lib/components/Loading.svelte

@@ -21,21 +21,21 @@
         left: 0%;
         top: 0%;
         animation: rotate-one 1s linear infinite;
-        border-bottom: 3px solid gray;
+        border-bottom: 3px solid var(--fg);
     }
 
     .inner.two {
         right: 0%;
         top: 0%;
         animation: rotate-two 1s linear infinite;
-        border-right: 3px solid gray;
+        border-right: 3px solid var(--fg);
     }
 
     .inner.three {
         right: 0%;
         bottom: 0%;
         animation: rotate-three 1s linear infinite;
-        border-top: 3px solid gray;
+        border-top: 3px solid var(--fg);
     }
 
     @keyframes rotate-one {

src/routes/repos/+page.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-    import { loadRepos, repos } from '$lib/stores';
+    import { loadRepos, repos } from '$lib/stores';    import { onMount } from 'svelte';
     import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
-    import { toasts } from 'svelte-toasts';
 
     import FlexGallery from '$lib/components/FlexGallery.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
-    import Loading from '$lib/components/Loading.svelte';
 
     let repoImages: Record<string, string | null> = {};
 
@@ -20,28 +18,12 @@
             }
         })();
     }
+
+    onMount(loadRepos);
 </script>
 
-{#await loadRepos()}
-    <Loading />
-{:then _}
-    {#if $repos.length == 0}
-        {console.log("No Repos")}
-        <div style="display: none;">
-            {toasts.add({
-                title: 'Error',
-                description: 'Failed to load repositories',
-                duration: 5000,
-                type: 'error',
-                placement: 'bottom-center',
-                showProgress: true
-            })}
-        </div>
-    {/if}
-    <!-- Repositories loaded successfully -->
 <FlexGallery>
     {#each $repos as repo}
-            <!-- <Loading /> -->
         <Card
             headerLeft={repo.name}
             headerRight={repo.language}
@@ -62,4 +44,3 @@
         </Card>
     {/each}
 </FlexGallery>
-{/await}