From 838d496aab3f4f630115b7647c08398fa6ba92be Mon Sep 17 00:00:00 2001
From: Nathan G <ggprogamingbusiness@gmail.com>
Date: Sun, 1 Oct 2023 18:16:19 -0700
Subject: [PATCH] Main Iteration

---
 src/components/search/SearchResults.tsx |  4 ++--
 src/components/search/searchfields.scss | 31 +++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index bb0ca2084..ae58bc946 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -241,7 +241,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
             )}
         >
             {isLoading ? (
-                <div>Loading...</div> // Replace this with your preferred progress indicator
+                <div className='loading-circle'></div>
             ) : (
                 <>
                     <SearchResultsRow
@@ -333,7 +333,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
                     />
 
                     {allEmpty && !isLoading && (
-                        <div>Sorry, nothing&apos;s here :/</div>
+                        <div className='sorry-text'>Sorry! No results found for &quot;{query}&quot;</div>
                     )}
                 </>
             )}
diff --git a/src/components/search/searchfields.scss b/src/components/search/searchfields.scss
index 08d8515c8..4580dfcb8 100644
--- a/src/components/search/searchfields.scss
+++ b/src/components/search/searchfields.scss
@@ -9,3 +9,34 @@
     font-size: 2em;
     align-self: flex-end;
 }
+
+.sorry-text {
+    font-size: 2em;
+    text-align: center;
+    font-family: inherit;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+// New styles for loading circle
+.loading-circle {
+    border: 5px solid #557ece;
+    border-radius: 50%;
+    border-top: 5px solid #1b1b1bd7;
+    width: 65px;
+    height: 65px;
+    animation: spin 1s linear infinite;
+    margin: auto;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+@keyframes spin {
+    0% { transform: translate(-50%, -50%) rotate(0deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg); }
+}