Show loading spinners for form actions and page loads

web-app/src/routes/+layout.svelte

@@ -3,9 +3,20 @@
   import { page } from "$app/stores";
   import type { LayoutServerData } from "./$types";
   import type { Snippet } from "svelte";
+  import { beforeNavigate, afterNavigate } from "$app/navigation";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
   const { data, children }: { data: LayoutServerData; children: Snippet } = $props();
 
+  let loading = $state(false);
+
+  beforeNavigate(() => {
+    loading = true;
+  });
+  afterNavigate(() => {
+    loading = false;
+  });
+
   const isProjectRoute = $derived($page.url.pathname.startsWith("/website") && !$page.error);
   const routeName = $derived(
     $page.url.pathname === "/"
@@ -14,6 +25,10 @@
   );
 </script>
 
+{#if loading}
+  <LoadingSpinner />
+{/if}
+
 <svelte:head>
   <title>archtika | {routeName.replaceAll("/", " - ")}</title>
 </svelte:head>