Fix wallet indicator blink via wallet loading state (#2091)

* Fix wallet indicator blink via wallet loading state

* Fix 'attach wallet' button not showing up on page refresh

components/wallet-indicator.js

@@ -1,6 +1,6 @@
 import { useConfiguredWallets } from '@/wallets'
 
 export function useWalletIndicator () {
-  const wallets = useConfiguredWallets()
+  const { wallets, loading } = useConfiguredWallets()
-  return wallets.length === 0
+  return !loading && wallets.length === 0
 }

pages/wallets/index.js

@@ -3,7 +3,7 @@ import Layout from '@/components/layout'
 import styles from '@/styles/wallet.module.css'
 import Link from 'next/link'
 import { useWallets } from '@/wallets/index'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useIsClient } from '@/components/use-client'
 import WalletCard from '@/components/wallet-card'
 import { useToast } from '@/components/toast'
@@ -87,6 +87,7 @@ export default function Wallet ({ ssrData }) {
 
   const indicator = useWalletIndicator()
   const [showWallets, setShowWallets] = useState(!indicator)
+  useEffect(() => { setShowWallets(!indicator) }, [indicator])
 
   if (indicator && !showWallets) {
     return (

wallets/index.js

@@ -67,6 +67,7 @@ export function WalletsProvider ({ children }) {
   const [setWalletPriority] = useMutation(SET_WALLET_PRIORITY)
   const [serverWallets, setServerWallets] = useState([])
   const client = useApolloClient()
+  const [loading, setLoading] = useState(true)
 
   const { data, refetch } = useQuery(WALLETS,
     SSR ? {} : { nextFetchPolicy: 'cache-and-network' })
@@ -102,6 +103,7 @@ export function WalletsProvider ({ children }) {
       }
 
       setServerWallets(wallets)
+      setLoading(false)
     }
     loadWallets()
   }, [data?.wallets, decrypt, isActive])
@@ -198,12 +200,13 @@ export function WalletsProvider ({ children }) {
   // and a function to set priorities
   const value = useMemo(() => ({
     wallets,
+    loading,
     reloadLocalWallets,
     setPriorities,
     onVaultKeySet: syncLocalWallets,
     beforeDisconnectVault: unsyncLocalWallets,
     removeLocalWallets
-  }), [wallets, reloadLocalWallets, setPriorities, syncLocalWallets, unsyncLocalWallets, removeLocalWallets])
+  }), [wallets, loading, reloadLocalWallets, setPriorities, syncLocalWallets, unsyncLocalWallets, removeLocalWallets])
   return (
     <WalletsContext.Provider value={value}>
       <RetryHandler>
@@ -223,8 +226,11 @@ export function useWallet (name) {
 }
 
 export function useConfiguredWallets () {
-  const { wallets } = useWallets()
+  const { wallets, loading } = useWallets()
-  return useMemo(() => wallets.filter(w => isConfigured(w)), [wallets])
+  return useMemo(() => ({
+    wallets: wallets.filter(w => isConfigured(w)),
+    loading
+  }), [wallets, loading])
 }
 
 export function useSendWallets () {