Don't show "No markets found" when loading markets

web/components/bets-list.tsx

@@ -197,7 +197,7 @@ export function MyBetsSummary(props: {
       {resolution ? (
         <>
           <Col>
-            <div className="text-sm text-gray-500">Winnings</div>
+            <div className="text-sm text-gray-500">Payout</div>
             <div className="whitespace-nowrap">{formatMoney(betsPayout)}</div>
           </Col>
         </>

web/components/contracts-list.tsx

@@ -173,7 +173,7 @@ export function SearchableGrid(props: {
 
 export function ContractsList(props: { creator: User }) {
   const { creator } = props
-  const [contracts, setContracts] = useState<Contract[]>([])
+  const [contracts, setContracts] = useState<Contract[] | 'loading'>('loading')
 
   useEffect(() => {
     if (creator?.id) {
@@ -182,5 +182,9 @@ export function ContractsList(props: { creator: User }) {
     }
   }, [creator])
 
-  return <SearchableGrid contracts={contracts} defaultSort="all" />
+  return (
+    contracts !== 'loading' && (
+      <SearchableGrid contracts={contracts} defaultSort="all" />
+    )
+  )
 }

web/pages/markets.tsx

@@ -21,9 +21,11 @@ export default function Markets(props: { contracts: Contract[] }) {
   return (
     <div className="max-w-4xl px-4 pb-8 mx-auto">
       <Header />
+      {(props.contracts || contracts !== 'loading') && (
         <SearchableGrid
-        contracts={contracts === 'loading' ? props.contracts || [] : contracts}
+          contracts={contracts === 'loading' ? props.contracts : contracts}
         />
+      )}
     </div>
   )
 }