feat: image search spinner

reiniiriarios · Apr 27, 2024 · 506c748 · 506c748
1 parent 4bfbebf
commit 506c748
Showing 1 changed file with 23 additions and 1 deletion.
diff --git a/frontend/components/ImageSearch.svelte b/frontend/components/ImageSearch.svelte
@@ -5,6 +5,7 @@
   import { books } from "@stores/books";
   import Modal from "@components/Modal.svelte";
   import ScrollBox from "./ScrollBox.svelte";
+  import Spinner from "./Spinner.svelte";
 
   export let book: Book = {} as Book;
   export let selectedImageUrl: string = "";
@@ -117,7 +118,10 @@
       <div class="err">{err}</div>
     {/if}
     {#if searching}
-      <div class="searching">Searching...</div>
+      <div class="searching">
+        <div class="searching__spinner"><Spinner size="6rem" /></div>
+        <div class="searching__msg">Searching...</div>
+      </div>
     {:else}
       <div class="resultsContainer">
         <ScrollBox>
@@ -214,4 +218,22 @@
       gap: 1rem;
     }
   }
+
+  .searching {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    width: 100%;
+    height: 100%;
+
+    &__spinner {
+      color: var(--c-text-muted);
+    }
+
+    &__msg {
+      font-size: 1rem;
+    }
+  }
 </style>