Main Iteration

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>
                     )}
                 </>
             )}

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); }
+}