From d740a8005b3adc611e4e7aa2b5bae88c6dc72e06 Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Wed, 12 Jun 2024 10:58:26 +0200
Subject: [PATCH] [c] add loading indicators

---
 package.json                    |  1 +
 src/app.scss                    |  9 +++++++++
 src/lib/modules/ModCards.svelte | 12 ++++++++++--
 src/routes/+layout.svelte       | 34 ++++++++++++++++++++++++++-------
 yarn.lock                       |  5 +++++
 5 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 5896d37..0ce1140 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@sveltejs/adapter-node": "^1.2.4",
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.20.5",
+    "nprogress": "^0.2.0",
     "sass": "^1.62.0",
     "svelte": "^3.54.0",
     "svelte-material-icons": "^3.0.5",
diff --git a/src/app.scss b/src/app.scss
index 60fd4e6..a205755 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -68,3 +68,12 @@ button.transparent,
 [data-theme="dark"] .overflowing::after {
   background: linear-gradient(to top, $slate-800, #00000000);
 }
+
+#nprogress .bar {
+  background: #398711 !important;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  box-shadow: 0 0 10px #398711, 0 0 6px #398711 !important;
+}
diff --git a/src/lib/modules/ModCards.svelte b/src/lib/modules/ModCards.svelte
index 0cb8f0c..486dc46 100644
--- a/src/lib/modules/ModCards.svelte
+++ b/src/lib/modules/ModCards.svelte
@@ -8,6 +8,7 @@
   let searchQuery = "";
   let selectedFile = "modlist-rekindled.json";
   let fileList = [];
+  let loading = true;
 
   let searchQueryInput = (event) => {
     clearTimeout(timeout);
@@ -37,11 +38,13 @@
   }
 
   onMount(async () => {
+    loading = true;
     const response = await fetch("/assets/json/modlist-items.json");
     const data = await response.json();
     fileList = data;
     await fetchData(selectedFile);
     checkOverflow();
+    loading = false;
   });
 
   function fuzzySearch(query, mods) {
@@ -63,8 +66,10 @@
   }
 
   afterUpdate(() => {
+    loading = true;
     removeOverflow();
     checkOverflow();
+    loading = false;
   })
 </script>
 
@@ -83,7 +88,9 @@
 
 <hr />
 
-{#if fuzzySearch(searchQuery, mods.mods).length === 0 && fuzzySearch(searchQuery, mods.optional_mods).length === 0}
+{#if loading}
+  <p>Loading...</p>
+{:else if fuzzySearch(searchQuery, mods.mods).length === 0 && fuzzySearch(searchQuery, mods.optional_mods).length === 0}
   <p>⚠️ No results found.</p>
 {:else}
   <div class="grid" id="mods">
@@ -177,7 +184,8 @@
       margin-right: 1em;
       border-radius: 8px;
       cursor: pointer;
-      align-self: center;
+      align-self: flex-start;
+      margin: 0.5em 1em 0.5em 0;
       z-index: 2;
     }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2b9f087..cb7eab4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,36 +1,56 @@
 <script>
   import "../app.scss";
   import Header from "./Header.svelte";
+  import NProgress from "nprogress";
+  import { navigating } from "$app/stores";
+  import { page } from '$app/stores';
+  import "nprogress/nprogress.css";
   import { smoothScrollTo, handleKeydown } from "$lib/common";
 
   import { fly } from "svelte/transition";
   import { onMount } from "svelte";
   export let data;
+  let cached = $page.scrollRestoration === 'manual';
+
+  NProgress.configure({
+    // Full list: https://github.com/rstacruz/nprogress#configuration
+    minimum: 0.16,
+    showSpinner: false
+  });
+
+  $: {
+    if ($navigating && !cached) {
+      NProgress.start();
+    }
+    if (!$navigating && !cached) {
+      NProgress.done();
+    }
+  }
 
   onMount(() => {
     function smoothScrollTo(elementId) {
       document.getElementById(elementId).scrollIntoView({
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }
 
     function handleKeydown(elementId, event) {
-      if (event.key === 'Enter') {
+      if (event.key === "Enter") {
         smoothScrollTo(elementId);
       }
     }
 
     function toggleTopButton() {
-      const topButton = document.querySelector('.top-button');
+      const topButton = document.querySelector(".top-button");
       if (window.scrollY >= window.innerHeight) {
-        topButton.classList.add('show');
+        topButton.classList.add("show");
       } else {
-        topButton.classList.remove('show');
+        topButton.classList.remove("show");
       }
     }
 
-    window.addEventListener('scroll', toggleTopButton);
-  })
+    window.addEventListener("scroll", toggleTopButton);
+  });
 </script>
 
 <div class="app">
diff --git a/yarn.lock b/yarn.lock
index 240d894..0d3f357 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -635,6 +635,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"