more search loading interaction tweaks

src/components/molecules/SearchBar.tsx

@@ -1,7 +1,6 @@
 import React, { useState, ChangeEvent, FormEvent, ReactElement } from 'react'
 import { useNavigate } from '@reach/router'
 import styles from './SearchBar.module.css'
-import Loader from '../atoms/Loader'
 import Button from '../atoms/Button'
 import Input from '../atoms/Input'
 import InputGroup from '../atoms/Input/InputGroup'
@@ -19,7 +18,6 @@ export default function SearchBar({
 }): ReactElement {
   const navigate = useNavigate()
   const [value, setValue] = useState(initialValue || '')
-  const [searchStarted, setSearchStarted] = useState(false)
 
   function handleChange(e: ChangeEvent<HTMLInputElement>) {
     setValue(e.target.value)
@@ -27,10 +25,7 @@ export default function SearchBar({
 
   function startSearch(e: FormEvent<HTMLButtonElement>) {
     e.preventDefault()
-
     if (value === '') return
-
-    setSearchStarted(true)
     navigate(`/search?text=${value}`)
   }
 
@@ -46,7 +41,7 @@ export default function SearchBar({
           required
         />
         <Button onClick={(e: FormEvent<HTMLButtonElement>) => startSearch(e)}>
-          {searchStarted ? <Loader /> : 'Search'}
+          Search
         </Button>
       </InputGroup>
 

src/components/organisms/AssetList.module.css

@@ -14,4 +14,5 @@
 .empty {
   color: var(--color-secondary);
   font-size: var(--font-size-small);
+  font-style: italic;
 }

src/components/organisms/AssetList.tsx

@@ -53,7 +53,7 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
           })
         ) : (
           <div className={styles.empty}>
-            No data sets found in {appConfig.oceanConfig.metadataStoreUri}
+            No results found in {appConfig.oceanConfig.metadataStoreUri}
           </div>
         )}
       </div>

src/components/templates/Search/index.module.css

@@ -1,8 +1,3 @@
-.empty {
-  color: var(--color-secondary);
-  font-style: italic;
-}
-
 .grid {
   display: grid;
 }

src/components/templates/Search/index.tsx

@@ -23,16 +23,17 @@ export default function SearchPage({
   const parsed = queryString.parse(location.search)
   const { text, tag } = parsed
   const [queryResult, setQueryResult] = useState<QueryResult>()
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState<boolean>()
 
   useEffect(() => {
     async function initSearch() {
+      setLoading(true)
       const queryResult = await getResults(parsed)
       setQueryResult(queryResult)
       setLoading(false)
     }
     initSearch()
-  }, [])
+  }, [text, tag])
 
   return (
     <section className={styles.grid}>
@@ -45,13 +46,7 @@ export default function SearchPage({
       </aside>
 
       <div className={styles.results}>
-        {loading ? (
+        {loading ? <Loader /> : <AssetList queryResult={queryResult} />}
-          <Loader />
-        ) : queryResult && queryResult.results.length > 0 ? (
-          <AssetList queryResult={queryResult} />
-        ) : (
-          <div className={styles.empty}>No results found.</div>
-        )}
       </div>
     </section>
   )