(Feature) Safe owners not loaded

src/components/App/index.tsx

@@ -80,8 +80,8 @@ const App: React.FC = ({ children }) => {
   const granted = useSelector(grantedSelector)
   const sidebarItems = useSidebarItems()
 
-  useLoadSafe(safeAddress)
-  useSafeScheduledUpdates(safeAddress)
+  const safeLoaded = useLoadSafe(safeAddress)
+  useSafeScheduledUpdates(safeLoaded, safeAddress)
 
   const sendFunds = safeActionsState.sendFunds
   const formattedTotalBalance = currentSafeBalance ? formatAmountInUsFormat(currentSafeBalance) : ''

src/logic/safe/hooks/useLoadSafe.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
 import loadAddressBookFromStorage from 'src/logic/addressBook/store/actions/loadAddressBookFromStorage'
@@ -10,26 +10,26 @@ import fetchTransactions from 'src/logic/safe/store/actions/transactions/fetchTr
 import fetchSafeCreationTx from 'src/logic/safe/store/actions/fetchSafeCreationTx'
 import { Dispatch } from 'src/logic/safe/store/actions/types.d'
 
-export const useLoadSafe = (safeAddress?: string): void => {
+export const useLoadSafe = (safeAddress?: string): boolean => {
   const dispatch = useDispatch<Dispatch>()
+  const [isSafeLoaded, setIsSafeLoaded] = useState(false)
 
   useEffect(() => {
-    const fetchData = () => {
+    const fetchData = async () => {
       if (safeAddress) {
-        dispatch(fetchLatestMasterContractVersion())
-          .then(() => {
-            dispatch(fetchSafe(safeAddress))
-            return dispatch(fetchSafeTokens(safeAddress))
-          })
-          .then(() => {
-            dispatch(fetchSafeCreationTx(safeAddress))
-            dispatch(fetchTransactions(safeAddress))
-            return dispatch(addViewedSafe(safeAddress))
-          })
+        await dispatch(fetchLatestMasterContractVersion())
+        await dispatch(fetchSafe(safeAddress))
+        setIsSafeLoaded(true)
+        await dispatch(fetchSafeTokens(safeAddress))
+        dispatch(fetchSafeCreationTx(safeAddress))
+        dispatch(fetchTransactions(safeAddress))
+        dispatch(addViewedSafe(safeAddress))
       }
     }
     dispatch(loadAddressBookFromStorage())
 
     fetchData()
   }, [dispatch, safeAddress])
+
+  return isSafeLoaded
 }

src/logic/safe/hooks/useSafeScheduledUpdates.tsx

@@ -8,7 +8,7 @@ import { checkAndUpdateSafe } from 'src/logic/safe/store/actions/fetchSafe'
 import fetchTransactions from 'src/logic/safe/store/actions/transactions/fetchTransactions'
 import { TIMEOUT } from 'src/utils/constants'
 
-export const useSafeScheduledUpdates = (safeAddress?: string): void => {
+export const useSafeScheduledUpdates = (safeLoaded: boolean, safeAddress?: string): void => {
   const dispatch = useDispatch()
   const timer = useRef<number>()
 
@@ -34,13 +34,13 @@ export const useSafeScheduledUpdates = (safeAddress?: string): void => {
       }
     }
 
-    if (safeAddress) {
+    if (safeAddress && safeLoaded) {
       fetchSafeData(safeAddress)
     }
 
     return () => {
       mounted = false
       clearTimeout(timer.current)
     }
-  }, [dispatch, safeAddress])
+  }, [dispatch, safeAddress, safeLoaded])
 }