From 50c3df27514baf5467492203fad06ebfa9fd8e90 Mon Sep 17 00:00:00 2001
From: Ben Bjurstrom <benbjurstrom@users.noreply.github.com>
Date: Wed, 16 Oct 2024 16:16:30 -0700
Subject: [PATCH] 85 add loading indicator to search (#86)

---
 resources/views/components/search.blade.php | 54 +++++++++++++++------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php
index 49d901c..96a0f33 100644
--- a/resources/views/components/search.blade.php
+++ b/resources/views/components/search.blade.php
@@ -8,22 +8,25 @@
   open: false,
   resetOnOpen: true,
   closeOnSelection: true,
-
-  async performSearch(query) {
-      try {
-          const response = await fetch(`/prezet/search?q=${encodeURIComponent(query)}`, {
-              headers: {
-                  'Content-Type': 'application/json'
+  loading: false,
+
+    async performSearch(query) {
+        this.loading = true;
+        try {
+            const response = await fetch(`/prezet/search?q=${encodeURIComponent(query)}`, {
+                headers: {
+                    'Content-Type': 'application/json'
                 }
-          });
-          if (!response.ok) throw new Error('Search failed');
-          return await response.json();
-      } catch (error) {
-          console.error('Search error:', error);
-          this.filterResults = [];
-      }
-  },
-
+            });
+            if (!response.ok) throw new Error('Search failed');
+            return await response.json();
+        } catch (error) {
+            console.error('Search error:', error);
+            this.filterResults = [];
+        } finally {
+            this.loading = false;
+        }
+    },
 
   // Add your custom functionality or navigation when an option is selected
   optionSelected() {
@@ -285,6 +288,27 @@ class="w-full border-none bg-transparent py-3 text-sm placeholder:text-zinc-500
                         aria-expanded="true"
                         aria-autocomplete="list"
                     />
+                    <svg
+                        x-show="loading"
+                        class="inline-block size-6 animate-spin opacity-50"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                    >
+                        <circle
+                            class="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            stroke-width="4"
+                        ></circle>
+                        <path
+                            class="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        ></path>
+                    </svg>
                 </div>
             </div>
             <!-- EMD Search Input -->