Merge branch 'chore/tailwind-conversion' of ssh://git.luke-else.co.uk:222/luke-else/luke-else.co.uk into chore/tailwind-conversion

src/lib/components/Loading.svelte

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

src/routes/repos/+page.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-    import { loadRepos, repos } from '$lib/stores';    import { onMount } from 'svelte';
+    import { loadRepos, repos } from '$lib/stores';
     import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
+    import { toasts } from 'svelte-toasts';
 
     import GridGallery from '$lib/components/GridGallery.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
+    import Loading from '$lib/components/Loading.svelte';
 
     let repoImages: Record<string, string | null> = {};
 
@@ -18,35 +20,52 @@
             }
         })();
     }
-
-    onMount(loadRepos);
 </script>
 
-<GridGallery>
+{#await loadRepos()}
-    {#each $repos as repo}
+    <Loading />
-        <Card
+{:then _}
-            containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
+    {#if $repos.length == 0}
-        >
+        {console.log('No Repos')}
-            <h2 slot="headerLeft">{repo.name}</h2>
+        <div style="display: none;">
-            <h2 slot="headerRight" class="text-sm text-gray-500">
+            {toasts.add({
-                {repo.language}
+                title: 'Error',
-            </h2>
+                description: 'Failed to load repositories',
-            <div slot="content">
+                duration: 5000,
-                <div class="relative z-0">
+                type: 'error',
-                    {repo.description}
+                placement: 'bottom-center',
+                showProgress: true
+            })}
+        </div>
+    {/if}
+    <!-- Repositories loaded successfully -->
+    <GridGallery>
+        {#each $repos as repo}
+            <!-- <Loading /> -->
+            <Card
+                containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
+            >
+                <h2 slot="headerLeft">{repo.name}</h2>
+                <h2 slot="headerRight" class="text-sm text-gray-500">
+                    {repo.language}
+                </h2>
+                <div slot="content">
+                    <div class="relative z-0">
+                        {repo.description}
+                    </div>
+                    {#if repoImages[repo.name]}
+                        <!-- svelte-ignore a11y_img_redundant_alt -->
+                        <img
+                            src={repoImages[repo.name]}
+                            alt="repo image"
+                            class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
+                        />
+                    {/if}
                 </div>
-                {#if repoImages[repo.name]}
+                <h3 slot="footerLeft">
-                    <!-- svelte-ignore a11y_img_redundant_alt -->
+                    Last Updated: {timeSince(repo.updated_at)}
-                    <img
+                </h3>
-                        src={repoImages[repo.name]}
+            </Card>
-                        alt="repo image"
+        {/each}
-                        class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
+    </GridGallery>
-                    />
+{/await}
-                {/if}
-            </div>
-            <h3 slot="footerLeft">
-                Last Updated: {timeSince(repo.updated_at)}
-            </h3>
-        </Card>
-    {/each}
-</GridGallery>