load mango accounts

components/MangoAccountsList.tsx

@@ -28,7 +28,7 @@ const MangoAccountsList = ({
 }: {
   mangoAccount: MangoAccount
 }) => {
-  const mangoAccounts = mangoStore((s) => s.mangoAccounts)
+  const mangoAccounts = mangoStore((s) => s.mangoAccounts.accounts)
   const [showNewAccountModal, setShowNewAccountModal] = useState(false)
 
   return (

components/modals/CreateAccountModal.tsx

@@ -45,7 +45,7 @@ const CreateAccountModal = ({
   const handleNewAccount = async () => {
     const client = mangoStore.getState().client
     const group = mangoStore.getState().group
-    const mangoAccounts = mangoStore.getState().mangoAccounts
+    const mangoAccounts = mangoStore.getState().mangoAccounts.accounts
     const actions = mangoStore.getState().actions
     if (!group || !wallet) return
     setLoading(true)

components/wallet/WalletListener.tsx

@@ -4,12 +4,13 @@ import mangoStore from '../../store/state'
 import { Wallet } from '@project-serum/anchor'
 
 const WalletListener = () => {
-  const set = mangoStore((s) => s.set)
   const { wallet, connected, disconnecting } = useWallet()
-  const mangoAccounts = mangoStore((s) => s.mangoAccounts)
+  const loadingMangoAccounts = mangoStore((s) => s.mangoAccounts.loading)
+  const mangoAccounts = mangoStore((s) => s.mangoAccounts.accounts)
 
   useEffect(() => {
     const actions = mangoStore.getState().actions
+    const set = mangoStore.getState().set
 
     const onConnect = async () => {
       if (!wallet) return
@@ -20,10 +21,12 @@ const WalletListener = () => {
           mangoAccounts[0].accountNum
         )
       } else {
-        set((state) => {
-          state.mangoAccount.loading = false
+        if (!loadingMangoAccounts) {
+          set((s) => {
+            s.mangoAccount.loading = false
           })
         }
+      }
       actions.fetchProfilePicture(wallet.adapter as unknown as Wallet)
       actions.fetchWalletTokens(wallet.adapter as unknown as Wallet)
     }
@@ -32,7 +35,7 @@ const WalletListener = () => {
     if (connected) {
       onConnect()
     }
-  }, [wallet, connected, mangoAccounts.length])
+  }, [wallet, connected, loadingMangoAccounts, mangoAccounts.length])
 
   useEffect(() => {
     const setStore = mangoStore.getState().set

store/state.ts

@@ -103,7 +103,7 @@ export type MangoStore = {
       tradeHistory: { data: TradeHistoryItem[]; loading: boolean }
     }
   }
-  mangoAccounts: MangoAccount[]
+  mangoAccounts: { accounts: MangoAccount[]; loading: boolean }
   markets: Serum3Market[] | undefined
   notificationIdCounter: number
   notifications: Array<Notification>
@@ -168,7 +168,7 @@ const mangoStore = create<MangoStore>(
           tradeHistory: { data: [], loading: false },
         },
       },
-      mangoAccounts: [],
+      mangoAccounts: { accounts: [], loading: true },
       markets: undefined,
       notificationIdCounter: 0,
       notifications: [],
@@ -382,7 +382,8 @@ const mangoStore = create<MangoStore>(
             )
             if (mangoAccounts.length) {
               set((state) => {
-                state.mangoAccounts = mangoAccounts
+                state.mangoAccounts.accounts = mangoAccounts
+                state.mangoAccounts.loading = false
               })
             }
           } catch (e) {