Add loading indicator when algolia search is initially loading

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}

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">

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