Merge pull request #315 from samply/feat/306/loading-spinner

timakro · web-flow · commit 3a28c7e1e349 · 2025-04-03T14:30:05.000+02:00
feat: added query loading spinner
diff --git a/dev.ts b/dev.ts
@@ -194,11 +194,19 @@ setCatalogue([
     },
 ]);
 
+function sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}
+
 window.addEventListener("emit-lens-query", (event) => {
     const detail = (event as QueryEvent).detail;
     console.log("AST:", JSON.stringify(detail.ast));
-    detail.updateResponse(new Map([["riverside", makeSite(5, 4, 0)]]));
-    detail.updateResponse(new Map([["summit", makeSite(12, 18, 3)]]));
+    sleep(3000).then(() => {
+        detail.updateResponse(new Map([["riverside", makeSite(5, 4, 0)]]));
+        detail.updateResponse(new Map([["summit", makeSite(12, 18, 3)]]));
+    });
 });
 
 const errorToastTestButton = document.getElementById(
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
         <script type="module" src="dev.ts"></script>
     </head>
     <body>
+        <lens-query-spinner></lens-query-spinner>
         <lens-search-bar></lens-search-bar>
         <lens-search-button></lens-search-button>
         <lens-catalogue></lens-catalogue>
diff --git a/src/components/informational/QuerySpinner.wc.svelte b/src/components/informational/QuerySpinner.wc.svelte
@@ -0,0 +1,52 @@
+<svelte:options
+    customElement={{
+        tag: "lens-query-spinner",
+    }}
+/>
+
+<script lang="ts">
+    import { responseStore } from "../../stores/response";
+    import type { ResponseStore } from "../../types/backend";
+
+    let { size = "20px" } = $props();
+
+    let loading = $state(false);
+
+    window.addEventListener("emit-lens-query", function () {
+        loading = true;
+    });
+
+    responseStore.subscribe((s: ResponseStore) => {
+        for (const value of s) {
+            if (value[1].status === "claimed") {
+                return;
+            }
+        }
+        loading = false;
+    });
+</script>
+
+<div
+    class="spinner"
+    style="--size: {size}; visibility: {loading ? 'visible' : 'hidden'};"
+></div>
+
+<style>
+    .spinner {
+        border: 4px solid rgba(0, 0, 0, 0.1);
+        border-top: 4px solid #3498db;
+        border-radius: 50%;
+        width: var(--size);
+        height: var(--size);
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>
diff --git a/src/index.ts b/src/index.ts
@@ -45,6 +45,7 @@ import "./components/buttons/InfoButtonComponent.wc.svelte";
 import "./components/Options.wc.svelte";
 import "./components/DataPasser.wc.svelte";
 import "./components/informational/ModifiedSearchComponent.wc.svelte";
+import "./components/informational/QuerySpinner.wc.svelte";
 import "./components/ErrorToasts.wc.svelte";
 
 // Include CSS in the bundle
