From 958b8e3643cd892bb7eab4ab8921531c8c4b462a Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Sat, 7 Sep 2024 14:28:23 +0200
Subject: [PATCH] Show loading spinners for form actions and page loads

---
 .../src/lib/components/LoadingSpinner.svelte  | 32 +++++++++++++++++++
 .../src/routes/(anonymous)/login/+page.svelte | 18 ++++++++++-
 .../routes/(anonymous)/register/+page.svelte  | 18 ++++++++++-
 .../src/routes/(authenticated)/+page.svelte   | 13 ++++++++
 .../(authenticated)/account/+page.svelte      | 21 +++++++++++-
 .../website/[websiteId]/+page.svelte          | 15 +++++++++
 .../[websiteId]/articles/+page.server.ts      |  2 --
 .../website/[websiteId]/articles/+page.svelte | 11 +++++++
 .../articles/[articleId]/+page.svelte         |  9 ++++++
 .../[websiteId]/categories/+page.svelte       | 13 ++++++++
 .../[websiteId]/collaborators/+page.svelte    | 13 ++++++++
 .../website/[websiteId]/publish/+page.svelte  | 19 ++++++++++-
 web-app/src/routes/+layout.svelte             | 15 +++++++++
 13 files changed, 193 insertions(+), 6 deletions(-)
 create mode 100644 web-app/src/lib/components/LoadingSpinner.svelte

diff --git a/web-app/src/lib/components/LoadingSpinner.svelte b/web-app/src/lib/components/LoadingSpinner.svelte
new file mode 100644
index 0000000..6eb9339
--- /dev/null
+++ b/web-app/src/lib/components/LoadingSpinner.svelte
@@ -0,0 +1,32 @@
+<div class="spinner"></div>
+
+<style>
+  @keyframes spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .spinner {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 40;
+  }
+
+  .spinner::before {
+    content: "";
+    position: absolute;
+    inline-size: 4rem;
+    block-size: 4rem;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    margin-block-start: -2rem;
+    margin-inline-start: -2rem;
+    border-radius: 50%;
+    border: var(--border-primary);
+    border-width: 0.125rem;
+    border-block-start-color: var(--color-accent);
+    animation: spinner 0.6s linear infinite;
+  }
+</style>
diff --git a/web-app/src/routes/(anonymous)/login/+page.svelte b/web-app/src/routes/(anonymous)/login/+page.svelte
index 14e541a..30bcd57 100644
--- a/web-app/src/routes/(anonymous)/login/+page.svelte
+++ b/web-app/src/routes/(anonymous)/login/+page.svelte
@@ -2,13 +2,29 @@
   import { enhance } from "$app/forms";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import type { ActionData } from "./$types";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
   const { form }: { form: ActionData } = $props();
+
+  let sending = $state(false);
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
 
-<form method="POST" use:enhance>
+{#if sending}
+  <LoadingSpinner />
+{/if}
+
+<form
+  method="POST"
+  use:enhance={() => {
+    sending = true;
+    return async ({ update }) => {
+      await update();
+      sending = false;
+    };
+  }}
+>
   <label>
     Username:
     <input type="text" name="username" required />
diff --git a/web-app/src/routes/(anonymous)/register/+page.svelte b/web-app/src/routes/(anonymous)/register/+page.svelte
index 2d5d2b9..3c5a620 100644
--- a/web-app/src/routes/(anonymous)/register/+page.svelte
+++ b/web-app/src/routes/(anonymous)/register/+page.svelte
@@ -2,13 +2,29 @@
   import { enhance } from "$app/forms";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import type { ActionData } from "./$types";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
   const { form }: { form: ActionData } = $props();
+
+  let sending = $state(false);
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
 
-<form method="POST" use:enhance>
+{#if sending}
+  <LoadingSpinner />
+{/if}
+
+<form
+  method="POST"
+  use:enhance={() => {
+    sending = true;
+    return async ({ update }) => {
+      await update();
+      sending = false;
+    };
+  }}
+>
   <label>
     Username:
     <input type="text" name="username" minlength="3" maxlength="16" required />
diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte
index 0854b1f..592780a 100644
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/web-app/src/routes/(authenticated)/+page.svelte
@@ -5,12 +5,19 @@
   import Modal from "$lib/components/Modal.svelte";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import type { ActionData, PageServerData } from "./$types";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
   const { form, data }: { form: ActionData; data: PageServerData } = $props();
+
+  let sending = $state(false);
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
 
+{#if sending}
+  <LoadingSpinner />
+{/if}
+
 <section id="create-website">
   <h2>
     <a href="#create-website">Create website</a>
@@ -23,9 +30,11 @@
       method="POST"
       action="?/createWebsite"
       use:enhance={() => {
+        sending = true;
         return async ({ update }) => {
           await update();
           window.location.hash = "!";
+          sending = false;
         };
       }}
     >
@@ -111,9 +120,11 @@
                 method="POST"
                 action="?/updateWebsite"
                 use:enhance={() => {
+                  sending = true;
                   return async ({ update }) => {
                     await update({ reset: false });
                     window.location.hash = "!";
+                    sending = false;
                   };
                 }}
               >
@@ -144,9 +155,11 @@
                 method="POST"
                 action="?/deleteWebsite"
                 use:enhance={() => {
+                  sending = true;
                   return async ({ update }) => {
                     await update();
                     window.location.hash = "!";
+                    sending = false;
                   };
                 }}
               >
diff --git a/web-app/src/routes/(authenticated)/account/+page.svelte b/web-app/src/routes/(authenticated)/account/+page.svelte
index 65d913b..800a035 100644
--- a/web-app/src/routes/(authenticated)/account/+page.svelte
+++ b/web-app/src/routes/(authenticated)/account/+page.svelte
@@ -2,13 +2,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}
+
 <section id="overview">
   <h2>
     <a href="#overview">Overview</a>
@@ -31,7 +38,17 @@
     <a href="#logout">Logout</a>
   </h2>
 
-  <form method="POST" action="?/logout" use:enhance>
+  <form
+    method="POST"
+    action="?/logout"
+    use:enhance={() => {
+      sending = true;
+      return async ({ update }) => {
+        await update();
+        sending = false;
+      };
+    }}
+  >
     <button type="submit">Logout</button>
   </form>
 </section>
@@ -53,9 +70,11 @@
       method="POST"
       action="?/deleteAccount"
       use:enhance={() => {
+        sending = true;
         return async ({ update }) => {
           await update();
           window.location.hash = "!";
+          sending = false;
         };
       }}
     >
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
index c8046c2..fccabfe 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
@@ -5,6 +5,7 @@
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import type { ActionData, LayoutServerData, PageServerData } from "./$types";
   import Modal from "$lib/components/Modal.svelte";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
   const { data, form }: { data: PageServerData & LayoutServerData; 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}
@@ -44,8 +51,10 @@
       method="POST"
       enctype="multipart/form-data"
       use:enhance={() => {
+        sending = true;
         return async ({ update }) => {
           await update({ reset: false });
+          sending = false;
         };
       }}
     >
@@ -98,8 +107,10 @@
       method="POST"
       enctype="multipart/form-data"
       use:enhance={() => {
+        sending = true;
         return async ({ update }) => {
           await update({ reset: false });
+          sending = false;
         };
       }}
     >
@@ -148,8 +159,10 @@
       action="?/updateHome"
       method="POST"
       use:enhance={() => {
+        sending = true;
         return async ({ update }) => {
           await update({ reset: false });
+          sending = false;
         };
       }}
     >
@@ -179,8 +192,10 @@
       action="?/updateFooter"
       method="POST"
       use:enhance={() => {
+        sending = true;
         return async ({ update }) => {
           await update({ reset: false });
+          sending = false;
         };
       }}
     >
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
index 6a144b9..0cd4bc4 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/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) {
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
index bc8c03c..1832660 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/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;
                     };
                   }}
                 >
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
index 13e0a4e..b074458 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/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;
         };
       }}
     >
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
index ea7e509..71100d9 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
@@ -3,13 +3,20 @@
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import Modal from "$lib/components/Modal.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}
@@ -28,9 +35,11 @@
         method="POST"
         action="?/createCategory"
         use:enhance={() => {
+          sending = true;
           return async ({ update }) => {
             await update();
             window.location.hash = "!";
+            sending = false;
           };
         }}
       >
@@ -70,9 +79,11 @@
                   method="POST"
                   action="?/updateCategory"
                   use:enhance={() => {
+                    sending = true;
                     return async ({ update }) => {
                       await update({ reset: false });
                       window.location.hash = "!";
+                      sending = false;
                     };
                   }}
                 >
@@ -95,9 +106,11 @@
                   method="POST"
                   action="?/deleteCategory"
                   use:enhance={() => {
+                    sending = true;
                     return async ({ update }) => {
                       await update();
                       window.location.hash = "!";
+                      sending = false;
                     };
                   }}
                 >
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
index f8f8a03..2269593 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
@@ -3,13 +3,20 @@
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import Modal from "$lib/components/Modal.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}
@@ -28,9 +35,11 @@
         method="POST"
         action="?/addCollaborator"
         use:enhance={() => {
+          sending = true;
           return async ({ update }) => {
             await update();
             window.location.hash = "!";
+            sending = false;
           };
         }}
       >
@@ -74,9 +83,11 @@
                   method="POST"
                   action="?/updateCollaborator"
                   use:enhance={() => {
+                    sending = true;
                     return async ({ update }) => {
                       await update({ reset: false });
                       window.location.hash = "!";
+                      sending = false;
                     };
                   }}
                 >
@@ -103,9 +114,11 @@
                   method="POST"
                   action="?/removeCollaborator"
                   use:enhance={() => {
+                    sending = true;
                     return async ({ update }) => {
                       await update();
                       window.location.hash = "!";
+                      sending = false;
                     };
                   }}
                 >
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
index a0f8fd7..83ffd9b 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
@@ -3,14 +3,21 @@
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import type { ActionData, PageServerData } from "./$types";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   const prodWebsiteUrl = data.websitePreviewUrl.replace("/previews", "");
+
+  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}
@@ -27,7 +34,17 @@
       is published. If you are happy with the results, click the button below and your website will
       be published on the Internet.
     </p>
-    <form method="POST" action="?/publishWebsite" use:enhance>
+    <form
+      method="POST"
+      action="?/publishWebsite"
+      use:enhance={() => {
+        sending = true;
+        return async ({ update }) => {
+          await update();
+          sending = false;
+        };
+      }}
+    >
       <button type="submit">Publish</button>
     </form>
 
diff --git a/web-app/src/routes/+layout.svelte b/web-app/src/routes/+layout.svelte
index be61f4a..866a528 100644
--- a/web-app/src/routes/+layout.svelte
+++ b/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>