loading states and no results

packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss

@@ -54,7 +54,7 @@
     display: flex;
     justify-content: center;
     color: $primary;
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 500;
   }
 }
@@ -70,6 +70,17 @@
   }
 }
 
+.no-results {
+  text-align: center;
+  color: rgba($white, 0.5);
+  font-size: 15px;
+
+  &:hover {
+    background-color: $panel-inner !important;
+    cursor: default !important;
+  }
+}
+
 @media (max-width: 992px) {
   .search-bar-container {
     width: 100%;

packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx

@@ -24,6 +24,7 @@ export default function SearchBar({
 }: SearchBarProps) {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [foundTtsModels, setFoundTtsModels] = useState<TtsModel[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const maybeSearch = useCallback(async (value: string) => {
     setSearchTerm(value);
@@ -35,6 +36,8 @@ export default function SearchBar({
         search_term: value,
       };
 
+      setIsLoading(true);
+
       let response = await SearchTtsModels(request);
 
       if (response.success) {
@@ -43,6 +46,8 @@ export default function SearchBar({
       } else {
         setFoundTtsModels([]);
       }
+
+      setIsLoading(false);
     },
     [setFoundTtsModels]
   );
@@ -61,7 +66,13 @@ export default function SearchBar({
           onBlur={onBlur}
           autoFocus={autoFocus}
         />
-        {isFocused && <SearchResultsDropdown data={foundTtsModels} />}
+        {isFocused && (
+          <SearchResultsDropdown
+            data={foundTtsModels}
+            isNoResults={foundTtsModels.length === 0 && searchTerm !== ""}
+            isLoading={isLoading}
+          />
+        )}
       </div>
 
       <Button

packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx

@@ -5,10 +5,14 @@ import Badge from "../Badge";
 
 interface SearchResultsDropdownProps {
   data: TtsModel[];
+  isNoResults?: boolean;
+  isLoading?: boolean;
 }
 
 export default function SearchResultsDropdown({
   data,
+  isNoResults,
+  isLoading,
 }: SearchResultsDropdownProps) {
   const history = useHistory();
 
@@ -57,6 +61,33 @@ export default function SearchResultsDropdown({
           </div>
         </div>
       )}
+      {data.length === 0 && !isLoading && isNoResults && (
+        <div className="search-results-dropdown">
+          <div
+            className="search-results-dropdown-item p-3 no-results"
+            onClick={handleInnerClick}
+          >
+            No results found
+          </div>
+        </div>
+      )}
+      {isLoading && isNoResults && (
+        <div className="search-results-dropdown">
+          <div
+            className="search-results-dropdown-item p-3"
+            onClick={handleInnerClick}
+          >
+            <div className="text-center">
+              <div
+                className="spinner-border spinner-border-md opacity-50"
+                role="status"
+              >
+                <span className="visually-hidden">Loading...</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }

packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx

@@ -438,6 +438,7 @@ export default function SideNav({
               </span>
             </div>
           </div>
+
           <div className="px-4 d-flex d-lg-none gap-2 mt-3">
             {userOrLoginButton}
             {signupOrLogOutButton}