From 506c748a6011f1b814886a915b28f221d03e4ef1 Mon Sep 17 00:00:00 2001
From: Emma Litwa-Vulcu <80431903+reiniiriarios@users.noreply.github.com>
Date: Sat, 27 Apr 2024 13:25:48 -0700
Subject: [PATCH] feat: image search spinner

---
 frontend/components/ImageSearch.svelte | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/components/ImageSearch.svelte b/frontend/components/ImageSearch.svelte
index 4cd3645..c937c79 100644
--- 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>