From b3b06896bec8e3f324516dcf18c23b124aa78e96 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Fri, 5 Aug 2022 17:44:55 -0700
Subject: [PATCH] Add loading indicator when algolia search is initially
 loading

---
 web/components/contract-search.tsx         |  2 +-
 web/components/contract/contracts-list.tsx |  7 ++++++-
 web/pages/contract-search-firestore.tsx    | 17 ++++++-----------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index c1e63175..607a4668 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -343,7 +343,7 @@ export function ContractSearch(props: {
         <>You're not following anyone, nor in any of your own groups yet.</>
       ) : (
         <ContractsGrid
-          contracts={contracts}
+          contracts={hitsByPage[0] === undefined ? undefined : contracts}
           loadMore={loadMore}
           hasMore={true}
           showTime={showTime}
diff --git a/web/components/contract/contracts-list.tsx b/web/components/contract/contracts-list.tsx
index c733bd76..31a564d3 100644
--- a/web/components/contract/contracts-list.tsx
+++ b/web/components/contract/contracts-list.tsx
@@ -8,6 +8,7 @@ import { ContractSearch } from '../contract-search'
 import { useIsVisible } from 'web/hooks/use-is-visible'
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
+import { LoadingIndicator } from '../loading-indicator'
 
 export type ContractHighlightOptions = {
   contractIds?: string[]
@@ -15,7 +16,7 @@ export type ContractHighlightOptions = {
 }
 
 export function ContractsGrid(props: {
-  contracts: Contract[]
+  contracts: Contract[] | undefined
   loadMore: () => void
   hasMore: boolean
   showTime?: ShowTime
@@ -49,6 +50,10 @@ export function ContractsGrid(props: {
     }
   }, [isBottomVisible, hasMore, loadMore])
 
+  if (contracts === undefined) {
+    return <LoadingIndicator />
+  }
+
   if (contracts.length === 0) {
     return (
       <p className="mx-2 text-gray-500">
diff --git a/web/pages/contract-search-firestore.tsx b/web/pages/contract-search-firestore.tsx
index 9039aa50..7bb42a05 100644
--- a/web/pages/contract-search-firestore.tsx
+++ b/web/pages/contract-search-firestore.tsx
@@ -3,7 +3,6 @@ import { searchInAny } from 'common/util/parse'
 import { sortBy } from 'lodash'
 import { useState } from 'react'
 import { ContractsGrid } from 'web/components/contract/contracts-list'
-import { LoadingIndicator } from 'web/components/loading-indicator'
 import { useContracts } from 'web/hooks/use-contracts'
 import {
   Sort,
@@ -118,16 +117,12 @@ export default function ContractSearchFirestore(props: {
           <option value="close-date">Closing soon</option>
         </select>
       </div>
-      {contracts === undefined ? (
-        <LoadingIndicator />
-      ) : (
-        <ContractsGrid
-          contracts={matches}
-          loadMore={() => {}}
-          hasMore={false}
-          showTime={showTime}
-        />
-      )}
+      <ContractsGrid
+        contracts={matches}
+        loadMore={() => {}}
+        hasMore={false}
+        showTime={showTime}
+      />
     </div>
   )
 }