From 66d7eef617082fafdb45c97a6217a806da7fcb66 Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Sat, 12 Apr 2025 21:26:30 +0200
Subject: [PATCH] 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 |  4 ++--
 pages/wallets/index.js         |  3 ++-
 wallets/index.js               | 12 +++++++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/wallet-indicator.js b/components/wallet-indicator.js
index ee549870..a4e7365f 100644
--- a/components/wallet-indicator.js
+++ b/components/wallet-indicator.js
@@ -1,6 +1,6 @@
 import { useConfiguredWallets } from '@/wallets'
 
 export function useWalletIndicator () {
-  const wallets = useConfiguredWallets()
-  return wallets.length === 0
+  const { wallets, loading } = useConfiguredWallets()
+  return !loading && wallets.length === 0
 }
diff --git a/pages/wallets/index.js b/pages/wallets/index.js
index a6d2d5cf..55861f35 100644
--- a/pages/wallets/index.js
+++ b/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 (
diff --git a/wallets/index.js b/wallets/index.js
index c63ded59..167a3428 100644
--- a/wallets/index.js
+++ b/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()
-  return useMemo(() => wallets.filter(w => isConfigured(w)), [wallets])
+  const { wallets, loading } = useWallets()
+  return useMemo(() => ({
+    wallets: wallets.filter(w => isConfigured(w)),
+    loading
+  }), [wallets, loading])
 }
 
 export function useSendWallets () {