From 793742b4997714ce29a539e6b60678830a0ca656 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sun, 20 Feb 2022 22:26:22 -0600
Subject: [PATCH] Trades page: Wait for all bets / contract data to load with
 loading indicator

---
 web/components/bets-list.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index f6cef617..d37353ab 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -34,6 +34,7 @@ import { sellBet } from '../lib/firebase/api-call'
 import { ConfirmationButton } from './confirmation-button'
 import { OutcomeLabel, YesLabel, NoLabel } from './outcome-label'
 import { filterDefined } from '../../common/util/array'
+import { LoadingIndicator } from './loading-indicator'
 
 type BetSort = 'newest' | 'profit' | 'resolved' | 'value'
 
@@ -41,28 +42,29 @@ export function BetsList(props: { user: User }) {
   const { user } = props
   const bets = useUserBets(user.id)
 
-  const [contracts, setContracts] = useState<Contract[]>([])
+  const [contracts, setContracts] = useState<Contract[] | undefined>()
 
   const [sort, setSort] = useState<BetSort>('value')
 
   useEffect(() => {
-    const loadedBets = bets ? bets : []
-    const contractIds = _.uniq(loadedBets.map((bet) => bet.contractId))
+    if (bets) {
+      const contractIds = _.uniq(bets.map((bet) => bet.contractId))
 
-    let disposed = false
-    Promise.all(contractIds.map((id) => getContractFromId(id))).then(
-      (contracts) => {
-        if (!disposed) setContracts(filterDefined(contracts))
+      let disposed = false
+      Promise.all(contractIds.map((id) => getContractFromId(id))).then(
+        (contracts) => {
+          if (!disposed) setContracts(filterDefined(contracts))
+        }
+      )
+
+      return () => {
+        disposed = true
       }
-    )
-
-    return () => {
-      disposed = true
     }
   }, [bets])
 
-  if (!bets) {
-    return <></>
+  if (!bets || !contracts) {
+    return <LoadingIndicator />
   }
 
   if (bets.length === 0)