From c939655a4fa88af38a72050add85b78242b60945 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Mon, 16 Dec 2024 02:26:35 +0100
Subject: [PATCH] Lib: Implement site loading indicator

---
 src/lib/components/LoadingIndicator.svelte | 62 ++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/lib/components/LoadingIndicator.svelte

diff --git a/src/lib/components/LoadingIndicator.svelte b/src/lib/components/LoadingIndicator.svelte
new file mode 100644
index 0000000..ea0f202
--- /dev/null
+++ b/src/lib/components/LoadingIndicator.svelte
@@ -0,0 +1,62 @@
+<!-- https://www.sveltelab.dev/dc0nf9id4ust2vw -->
+
+<script lang="ts">
+  import { navigating } from "$app/stores";
+
+  let loading: string = $state("no");
+  let percentage: number = $state(0);
+
+  $effect(() => {
+    if ($navigating) {
+      loading = "yes";
+    } else {
+      loading = "closing";
+      setTimeout(() => {
+        loading = "no";
+      }, 300);
+    }
+  });
+
+  $effect(() => {
+    if (loading === "closing") {
+      percentage = 1;
+    }
+  });
+
+  const load = (_node: HTMLElement) => {
+    let timeout: NodeJS.Timeout;
+    const handle = () => {
+      if (percentage < 0.7) {
+        percentage += Math.random() * 0.3;
+
+        // Let's call ourselves recursively to fill the loading bar
+        timeout = setTimeout(handle, Math.random() * 1000);
+      }
+    };
+
+    handle();
+
+    return {
+      destroy() {
+        clearTimeout(timeout);
+        percentage = 0;
+      },
+    };
+  };
+</script>
+
+{#if loading !== "no"}
+  <div
+    class="fixed inset-0 bottom-auto z-50 h-1 bg-error-500"
+    use:load
+    style:--percentage={percentage}
+  ></div>
+{/if}
+
+<style>
+  div {
+    transform-origin: left;
+    transform: scaleX(calc(var(--percentage) * 100%));
+    transition: transform 250ms;
+  }
+</style>