From bf514840f6903e6c9a119fee9c7fe8d028a945af Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 17 Dec 2023 23:26:19 +0700
Subject: [PATCH] loading states and no results

---
 .../common/SearchBar/SearchBar.scss           | 13 +++++++-
 .../components/common/SearchBar/SearchBar.tsx | 13 +++++++-
 .../SearchBar/SearchResultsDropdown.tsx       | 31 +++++++++++++++++++
 .../src/components/layout/SideNav/SideNav.tsx |  1 +
 4 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss
index 74e95922b0..dc3e8eb66b 100644
--- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss
+++ b/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%;
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx
index 25558f341b..f69a167dbf 100644
--- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx
+++ b/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
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx
index 058ceadd51..95d78dc8dc 100644
--- a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx
+++ b/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>
+      )}
     </>
   );
 }
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index 211177ff9e..c86537909f 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/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}