Show loading spinners for form actions and page loads

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;
         };
       }}
     >