Move loading indicator into SearchableGrid.

web/components/contract/contracts-list.tsx

@@ -18,6 +18,7 @@ import {
   useQueryAndSortParams,
 } from '../../hooks/use-sort-and-query-params'
 import { Answer } from '../../../common/answer'
+import { LoadingIndicator } from '../loading-indicator'
 
 export function ContractsGrid(props: {
   contracts: Contract[]
@@ -213,7 +214,7 @@ function TagContractsGrid(props: { contracts: Contract[] }) {
 const MAX_CONTRACTS_DISPLAYED = 99
 
 export function SearchableGrid(props: {
-  contracts: Contract[]
+  contracts: Contract[] | undefined
   byOneCreator?: boolean
   querySortOptions?: {
     defaultSort: Sort
@@ -230,7 +231,7 @@ export function SearchableGrid(props: {
     return queryWords.every((word) => corpus.toLowerCase().includes(word))
   }
 
-  let matches = contracts.filter(
+  let matches = (contracts ?? []).filter(
     (c) =>
       check(c.question) ||
       check(c.description) ||
@@ -324,7 +325,9 @@ export function SearchableGrid(props: {
         </select>
       </div>
 
-      {sort === 'tag' ? (
+      {contracts === undefined ? (
+        <LoadingIndicator />
+      ) : sort === 'tag' ? (
         <TagContractsGrid contracts={matches} />
       ) : !byOneCreator && sort === 'creator' ? (
         <CreatorContractsGrid contracts={matches} />

web/pages/markets.tsx

@@ -2,7 +2,6 @@ import {
   ContractsGrid,
   SearchableGrid,
 } from '../components/contract/contracts-list'
-import { LoadingIndicator } from '../components/loading-indicator'
 import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
 import { Title } from '../components/title'
@@ -20,11 +19,7 @@ export default function Markets() {
         description="Discover what's new, trending, or soon-to-close. Or search among our hundreds of markets."
         url="/markets"
       />
-      {contracts === undefined ? (
+      <SearchableGrid contracts={contracts} />
-        <LoadingIndicator />
-      ) : (
-        <SearchableGrid contracts={contracts} />
-      )}
     </Page>
   )
 }

web/pages/tag/[tag].tsx

@@ -3,27 +3,24 @@ import { useRouter } from 'next/router'
 import { SearchableGrid } from '../../components/contract/contracts-list'
 import { Page } from '../../components/page'
 import { Title } from '../../components/title'
-import { useContracts } from '../../hooks/use-contracts'
 import {
   Contract,
   listTaggedContractsCaseInsensitive,
 } from '../../lib/firebase/contracts'
 
-export default function TagPage(props: { contracts: Contract[] }) {
+export default function TagPage() {
   const router = useRouter()
   const { tag } = router.query as { tag: string }
 
   // mqp: i wrote this in a panic to make the page literally work at all so if you
   // want to e.g. listen for new contracts you may want to fix it up
-  const [contracts, setContracts] = useState<Contract[] | 'loading'>('loading')
+  const [contracts, setContracts] = useState<Contract[] | undefined>()
   useEffect(() => {
     if (tag != null) {
       listTaggedContractsCaseInsensitive(tag).then(setContracts)
     }
   }, [tag])
 
-  if (contracts === 'loading') return <></>
-
   return (
     <Page>
       <Title text={`#${tag}`} />