From 108d150d981c919c001566cbe72d0321a34d4fa8 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sun, 10 Mar 2024 14:48:47 +0100
Subject: [PATCH] Added a spinner during loading state

---
 .../components/AppLayoutSpinner.astro         | 66 +++++++++++++++++++
 .../AppLayout/components/Html.astro           |  3 +
 src/i18n/wordings-keys.ts                     |  3 +-
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AppLayout/components/AppLayoutSpinner.astro
diff --git a/src/components/AppLayout/components/AppLayoutSpinner.astro b/src/components/AppLayout/components/AppLayoutSpinner.astro
new file mode 100644
index 0000000..e296494
--- /dev/null
+++ b/src/components/AppLayout/components/AppLayoutSpinner.astro
@@ -0,0 +1,66 @@
+---
+import { Icon } from "astro-icon/components";
+import { getI18n } from "src/i18n/i18n";
+
+const { t } = await getI18n(Astro.locals.currentLocale);
+---
+
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<div id="app-layout-spinner"><Icon name="accords" /><p>{t("global.loading")}</p></div>
+
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+
+<style>
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(720deg);
+    }
+  }
+
+  #app-layout-spinner {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    place-content: center;
+    place-items: center;
+    gap: 1em;
+    background-color: color-mix(in srgb, var(--color-elevation-0) 90%, transparent);
+    z-index: 9999;
+
+    transition-duration: 1s;
+    transition-property: opacity;
+    transition-delay: 500ms;
+    touch-action: none;
+    pointer-events: none;
+    user-select: none;
+    display: grid;
+    opacity: 0;
+
+    &.show {
+      opacity: 1;
+    }
+
+    & > svg {
+      animation: spin 2s infinite ease;
+      width: 10vmin;
+      height: 10vmin;
+    }
+  }
+</style>
+
+{/* ------------------------------------------- JS --------------------------------------------- */}
+
+<script is:inline>
+  document.addEventListener("astro:before-preparation", () => {
+    document.querySelector("#app-layout-spinner").classList.add("show");
+  });
+  document.addEventListener("astro:after-preparation", () => {
+    document.querySelector("#app-layout-spinner").classList.remove("show");
+  });
+</script>
diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro
index 49725c7..31fd21f 100644
--- a/src/components/AppLayout/components/Html.astro
+++ b/src/components/AppLayout/components/Html.astro
@@ -4,6 +4,7 @@ import { ViewTransitions } from "astro:transitions";
 import "@fontsource-variable/vollkorn";
 import "@fontsource-variable/murecho";
 import { getI18n } from "src/i18n/i18n";
+import AppLayoutSpinner from "./AppLayoutSpinner.astro";
 
 interface Props {
   openGraph?:
@@ -116,6 +117,8 @@ const { currentTheme } = Astro.locals;
   <body>
     <slot />
   </body>
+
+  <AppLayoutSpinner />
 </html>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
diff --git a/src/i18n/wordings-keys.ts b/src/i18n/wordings-keys.ts
index 54dca34..16281c3 100644
--- a/src/i18n/wordings-keys.ts
+++ b/src/i18n/wordings-keys.ts
@@ -83,4 +83,5 @@ export type WordingKey =
   | "header.nav.parentPages.collections.folder"
   | "header.nav.parentPages.collections.collectible"
   | "header.nav.parentPages.tooltip"
-  | "global.meta.description";
+  | "global.meta.description"
+  | "global.loading";
