From a9e2bd4cb7428fd070ba5c57e151360f7a937e9f Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Wed, 25 Sep 2024 16:02:12 +0200
Subject: [PATCH] Set delayed loading spinner and additional CSP headers

---
 web-app/src/lib/components/LoadingSpinner.svelte   |  2 +-
 web-app/src/routes/(anonymous)/login/+page.svelte  |  4 +++-
 .../src/routes/(anonymous)/register/+page.svelte   |  4 +++-
 web-app/src/routes/(authenticated)/+page.svelte    | 10 +++++++---
 .../routes/(authenticated)/account/+page.svelte    |  7 +++++--
 .../website/[websiteId]/+page.svelte               | 13 +++++++++----
 .../website/[websiteId]/articles/+page.svelte      |  7 +++++--
 .../[websiteId]/articles/[articleId]/+page.svelte  |  4 +++-
 .../website/[websiteId]/categories/+page.svelte    | 10 +++++++---
 .../website/[websiteId]/collaborators/+page.svelte | 10 +++++++---
 .../[websiteId]/legal-information/+page.svelte     |  7 +++++--
 .../website/[websiteId]/publish/+page.svelte       | 10 +++++++---
 web-app/src/routes/+layout.svelte                  | 14 +++++++++++++-
 web-app/svelte.config.js                           | 14 ++++++++------
 14 files changed, 83 insertions(+), 33 deletions(-)

diff --git a/web-app/src/lib/components/LoadingSpinner.svelte b/web-app/src/lib/components/LoadingSpinner.svelte
index 7de9c20..12ee598 100644
--- a/web-app/src/lib/components/LoadingSpinner.svelte
+++ b/web-app/src/lib/components/LoadingSpinner.svelte
@@ -27,6 +27,6 @@
     border: var(--border-primary);
     border-width: 0.125rem;
     border-block-start-color: var(--color-accent);
-    animation: spinner 0.6s linear infinite;
+    animation: spinner 500ms linear infinite;
   }
 </style>
diff --git a/web-app/src/routes/(anonymous)/login/+page.svelte b/web-app/src/routes/(anonymous)/login/+page.svelte
index 30bcd57..f14398f 100644
--- a/web-app/src/routes/(anonymous)/login/+page.svelte
+++ b/web-app/src/routes/(anonymous)/login/+page.svelte
@@ -7,6 +7,7 @@
   const { form }: { form: ActionData } = $props();
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -18,9 +19,10 @@
 <form
   method="POST"
   use:enhance={() => {
-    sending = true;
+    loadingDelay = window.setTimeout(() => (sending = true), 500);
     return async ({ update }) => {
       await update();
+      window.clearTimeout(loadingDelay);
       sending = false;
     };
   }}
diff --git a/web-app/src/routes/(anonymous)/register/+page.svelte b/web-app/src/routes/(anonymous)/register/+page.svelte
index 2ec07f3..671f1be 100644
--- a/web-app/src/routes/(anonymous)/register/+page.svelte
+++ b/web-app/src/routes/(anonymous)/register/+page.svelte
@@ -7,6 +7,7 @@
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -37,9 +38,10 @@
   <form
     method="POST"
     use:enhance={() => {
-      sending = true;
+      loadingDelay = window.setTimeout(() => (sending = true), 500);
       return async ({ update }) => {
         await update();
+        window.clearTimeout(loadingDelay);
         sending = false;
       };
     }}
diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte
index 0d13769..498ba84 100644
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/web-app/src/routes/(authenticated)/+page.svelte
@@ -10,6 +10,7 @@
   const { form, data }: { form: ActionData; data: PageServerData } = $props();
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -30,9 +31,10 @@
       method="POST"
       action="?/createWebsite"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update();
+          window.clearTimeout(loadingDelay);
           window.location.hash = "!";
           sending = false;
         };
@@ -120,9 +122,10 @@
                 method="POST"
                 action="?/updateWebsite"
                 use:enhance={() => {
-                  sending = true;
+                  loadingDelay = window.setTimeout(() => (sending = true), 500);
                   return async ({ update }) => {
                     await update({ reset: false });
+                    window.clearTimeout(loadingDelay);
                     window.location.hash = "!";
                     sending = false;
                   };
@@ -155,9 +158,10 @@
                 method="POST"
                 action="?/deleteWebsite"
                 use:enhance={() => {
-                  sending = true;
+                  loadingDelay = window.setTimeout(() => (sending = true), 500);
                   return async ({ update }) => {
                     await update();
+                    window.clearTimeout(loadingDelay);
                     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 800a035..4e7c239 100644
--- a/web-app/src/routes/(authenticated)/account/+page.svelte
+++ b/web-app/src/routes/(authenticated)/account/+page.svelte
@@ -8,6 +8,7 @@
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -42,9 +43,10 @@
     method="POST"
     action="?/logout"
     use:enhance={() => {
-      sending = true;
+      loadingDelay = window.setTimeout(() => (sending = true), 500);
       return async ({ update }) => {
         await update();
+        window.clearTimeout(loadingDelay);
         sending = false;
       };
     }}
@@ -70,9 +72,10 @@
       method="POST"
       action="?/deleteAccount"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update();
+          window.clearTimeout(loadingDelay);
           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 3d3f91f..723ac10 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
@@ -27,6 +27,7 @@
   };
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -52,9 +53,10 @@
       method="POST"
       enctype="multipart/form-data"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update({ reset: false });
+          window.clearTimeout(loadingDelay);
           sending = false;
         };
       }}
@@ -108,9 +110,10 @@
       method="POST"
       enctype="multipart/form-data"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update({ reset: false });
+          window.clearTimeout(loadingDelay);
           sending = false;
         };
       }}
@@ -160,9 +163,10 @@
       action="?/updateHome"
       method="POST"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update({ reset: false });
+          window.clearTimeout(loadingDelay);
           sending = false;
         };
       }}
@@ -193,9 +197,10 @@
       action="?/updateFooter"
       method="POST"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update({ reset: false });
+          window.clearTimeout(loadingDelay);
           sending = false;
         };
       }}
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 1832660..baf1ed4 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
@@ -10,6 +10,7 @@
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -36,9 +37,10 @@
         method="POST"
         action="?/createArticle"
         use:enhance={() => {
-          sending = true;
+          loadingDelay = window.setTimeout(() => (sending = true), 500);
           return async ({ update }) => {
             await update();
+            window.clearTimeout(loadingDelay);
             window.location.hash = "!";
             sending = false;
           };
@@ -135,9 +137,10 @@
                   method="POST"
                   action="?/deleteArticle"
                   use:enhance={() => {
-                    sending = true;
+                    loadingDelay = window.setTimeout(() => (sending = true), 500);
                     return async ({ update }) => {
                       await update();
+                      window.clearTimeout(loadingDelay);
                       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 4acbb9c..0fb4884 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
@@ -28,6 +28,7 @@
   };
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -54,9 +55,10 @@
       action="?/editArticle"
       enctype="multipart/form-data"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update({ reset: false });
+          window.clearTimeout(loadingDelay);
           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 2f30e5a..5679a9e 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
@@ -9,6 +9,7 @@
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -35,9 +36,10 @@
         method="POST"
         action="?/createCategory"
         use:enhance={() => {
-          sending = true;
+          loadingDelay = window.setTimeout(() => (sending = true), 500);
           return async ({ update }) => {
             await update();
+            window.clearTimeout(loadingDelay);
             window.location.hash = "!";
             sending = false;
           };
@@ -79,9 +81,10 @@
                   method="POST"
                   action="?/updateCategory"
                   use:enhance={() => {
-                    sending = true;
+                    loadingDelay = window.setTimeout(() => (sending = true), 500);
                     return async ({ update }) => {
                       await update({ reset: false });
+                      window.clearTimeout(loadingDelay);
                       window.location.hash = "!";
                       sending = false;
                     };
@@ -117,9 +120,10 @@
                   method="POST"
                   action="?/deleteCategory"
                   use:enhance={() => {
-                    sending = true;
+                    loadingDelay = window.setTimeout(() => (sending = true), 500);
                     return async ({ update }) => {
                       await update();
+                      window.clearTimeout(loadingDelay);
                       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 1edb9f4..1a5173e 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
@@ -9,6 +9,7 @@
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -35,9 +36,10 @@
         method="POST"
         action="?/addCollaborator"
         use:enhance={() => {
-          sending = true;
+          loadingDelay = window.setTimeout(() => (sending = true), 500);
           return async ({ update }) => {
             await update();
+            window.clearTimeout(loadingDelay);
             window.location.hash = "!";
             sending = false;
           };
@@ -83,9 +85,10 @@
                   method="POST"
                   action="?/updateCollaborator"
                   use:enhance={() => {
-                    sending = true;
+                    loadingDelay = window.setTimeout(() => (sending = true), 500);
                     return async ({ update }) => {
                       await update({ reset: false });
+                      window.clearTimeout(loadingDelay);
                       window.location.hash = "!";
                       sending = false;
                     };
@@ -114,9 +117,10 @@
                   method="POST"
                   action="?/removeCollaborator"
                   use:enhance={() => {
-                    sending = true;
+                    loadingDelay = window.setTimeout(() => (sending = true), 500);
                     return async ({ update }) => {
                       await update();
+                      window.clearTimeout(loadingDelay);
                       window.location.hash = "!";
                       sending = false;
                     };
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.svelte
index ea23367..a4eb040 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.svelte
@@ -18,6 +18,7 @@
   };
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -62,9 +63,10 @@
       method="POST"
       action="?/createUpdateLegalInformation"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update({ reset: false });
+          window.clearTimeout(loadingDelay);
           sending = false;
         };
       }}
@@ -93,9 +95,10 @@
           action="?/deleteLegalInformation"
           method="post"
           use:enhance={() => {
-            sending = true;
+            loadingDelay = window.setTimeout(() => (sending = true), 500);
             return async ({ update }) => {
               await update();
+              window.clearTimeout(loadingDelay);
               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 8df031b..c91f928 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
@@ -9,6 +9,7 @@
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   let sending = $state(false);
+  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
@@ -37,9 +38,10 @@
       method="POST"
       action="?/publishWebsite"
       use:enhance={() => {
-        sending = true;
+        loadingDelay = window.setTimeout(() => (sending = true), 500);
         return async ({ update }) => {
           await update();
+          window.clearTimeout(loadingDelay);
           sending = false;
         };
       }}
@@ -68,9 +70,10 @@
         method="POST"
         action="?/createUpdateCustomDomainPrefix"
         use:enhance={() => {
-          sending = true;
+          loadingDelay = window.setTimeout(() => (sending = true), 500);
           return async ({ update }) => {
             await update();
+            window.clearTimeout(loadingDelay);
             sending = false;
           };
         }}
@@ -96,9 +99,10 @@
             action="?/deleteCustomDomainPrefix"
             method="post"
             use:enhance={() => {
-              sending = true;
+              loadingDelay = window.setTimeout(() => (sending = true), 500);
               return async ({ update }) => {
                 await update();
+                window.clearTimeout(loadingDelay);
                 window.location.hash = "!";
                 sending = false;
               };
diff --git a/web-app/src/routes/+layout.svelte b/web-app/src/routes/+layout.svelte
index 75a5ce9..9bffbcf 100644
--- a/web-app/src/routes/+layout.svelte
+++ b/web-app/src/routes/+layout.svelte
@@ -14,9 +14,21 @@
       ? "Dashboard"
       : `${$page.url.pathname.charAt(1).toUpperCase()}${$page.url.pathname.slice(2)}`
   );
+
+  let loading = $state(false);
+  let loadingDelay: number;
+
+  $effect(() => {
+    if ($navigating && ["link", "goto"].includes($navigating.type)) {
+      loadingDelay = window.setTimeout(() => (loading = true), 500);
+    } else {
+      window.clearTimeout(loadingDelay);
+      loading = false;
+    }
+  });
 </script>
 
-{#if $navigating && ["link", "goto"].includes($navigating.type)}
+{#if loading}
   <LoadingSpinner />
 {/if}
 
diff --git a/web-app/svelte.config.js b/web-app/svelte.config.js
index 5d2bc58..c2ee0a3 100644
--- a/web-app/svelte.config.js
+++ b/web-app/svelte.config.js
@@ -15,15 +15,17 @@ const config = {
     csp: {
       mode: "auto",
       directives: {
-        "default-src": ["self"],
+        "default-src": ["none"],
         "script-src": ["self"],
-        "style-src": ["self", "https:", "http:", "unsafe-inline"],
-        "img-src": ["self", "data:", "https:", "http:"],
-        "font-src": ["self", "https:", "http:"],
+        "style-src": ["self", "https:", "unsafe-inline"],
+        "img-src": ["self", "data:", "https:"],
+        "font-src": ["self", "https:"],
         "connect-src": ["self"],
-        "frame-src": ["self", "https:", "http:"],
+        "frame-src": ["self", "https:"],
         "object-src": ["none"],
-        "base-uri": ["self"]
+        "base-uri": ["self"],
+        "frame-ancestors": ["none"],
+        "form-action": ["self"]
       }
     }
   }