Fix loading indicator

src/routes/+layout.svelte

@@ -1,18 +1,29 @@
 <script>
     import '../app.pcss';
-    import { loading } from "$lib/stores.js";
-    /**
-     * @typedef {Object} Props
-     * @property {import('svelte').Snippet} [children]
-     */
+    import { loading } from '$lib/stores.js';
+    import { Fa } from 'svelte-fa';
+    import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
-    /** @type {Props} */
     let { children } = $props();
 </script>
 
 <div class="bg-gray-200">
-    {#if $loading}
-        <p class="absolute top-0 left-0">Loading</p>
-    {/if}
     {@render children?.()}
+    {#if $loading}
+        <div class="absolute bottom-4 right-4 spin">
+            <Fa size={'2x'} icon={faSpinner}></Fa>
+        </div>
+    {/if}
 </div>
+
+<style lang="postcss">
+    .spin {
+        animation: spin 2s infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg) }
+        50% { transform: rotate(360deg) }
+        100% { transform: rotate(720deg) }
+    }
+</style>