Show loading spinners for form actions and page loads

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts

@@ -16,8 +16,6 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url, parent
     baseFetchUrl += "&order=last_modified_at.desc,created_at.desc";
   }
 
-  console.log(baseFetchUrl);
-
   const parameters = new URLSearchParams();
 
   if (searchQuery) {

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte

@@ -4,13 +4,20 @@
   import { enhance } from "$app/forms";
   import Modal from "$lib/components/Modal.svelte";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
   import type { ActionData, PageServerData } from "./$types";
 
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
+
+  let sending = $state(false);
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
 
+{#if sending}
+  <LoadingSpinner />
+{/if}
+
 <WebsiteEditor
   id={data.website.id}
   contentType={data.website.content_type}
@@ -29,9 +36,11 @@
         method="POST"
         action="?/createArticle"
         use:enhance={() => {
+          sending = true;
           return async ({ update }) => {
             await update();
             window.location.hash = "!";
+            sending = false;
           };
         }}
       >
@@ -126,9 +135,11 @@
                   method="POST"
                   action="?/deleteArticle"
                   use:enhance={() => {
+                    sending = true;
                     return async ({ update }) => {
                       await update();
                       window.location.hash = "!";
+                      sending = false;
                     };
                   }}
                 >

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte

@@ -5,6 +5,7 @@
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import type { ActionData, PageServerData } from "./$types";
   import Modal from "$lib/components/Modal.svelte";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
   import { handleImagePaste } from "$lib/utils";
 
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
@@ -24,10 +25,16 @@
       previewContent = newContent;
     }
   };
+
+  let sending = $state(false);
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
 
+{#if sending}
+  <LoadingSpinner />
+{/if}
+
 <WebsiteEditor
   id={data.website.id}
   contentType={data.website.content_type}
@@ -46,8 +53,10 @@
       action="?/editArticle"
       enctype="multipart/form-data"
       use:enhance={() => {
+        sending = true;
         return async ({ update }) => {
           await update({ reset: false });
+          sending = false;
         };
       }}
     >