Refresh mint distribution when account info refreshes (#13064)

explorer/src/components/account/TokenLargestAccountsCard.tsx

@@ -19,14 +19,17 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
   const mintInfo = useMintAccountInfo(mintAddress);
   const largestAccounts = useTokenLargestTokens(mintAddress);
   const fetchLargestAccounts = useFetchTokenLargestAccounts();
-  const refreshLargest = () => fetchLargestAccounts(pubkey);
+  const refreshLargest = React.useCallback(() => fetchLargestAccounts(pubkey), [
+    pubkey,
+    fetchLargestAccounts,
+  ]);
   const { cluster } = useCluster();
   const unit = TokenRegistry.get(mintAddress, cluster)?.symbol;
   const unitLabel = unit ? `(${unit})` : "";
 
   React.useEffect(() => {
-    if (!largestAccounts) refreshLargest();
+    if (mintInfo) refreshLargest();
-  }, [mintAddress]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [mintInfo, refreshLargest]);
 
   // Largest accounts hasn't started fetching
   if (largestAccounts === undefined) return null;
@@ -45,6 +48,8 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
         text="Failed to fetch largest accounts"
       />
     );
+  } else if (largestAccounts.status === FetchStatus.Fetching) {
+    return <LoadingCard message="Refreshing largest accounts" />;
   }
 
   const accounts = largestAccounts.data.largest;

explorer/src/providers/accounts/index.tsx

@@ -263,6 +263,7 @@ export function useMintAccountInfo(
   address: string | undefined
 ): MintAccountInfo | undefined {
   const accountInfo = useAccountInfo(address);
+  return React.useMemo(() => {
     if (address === undefined) return;
 
     try {
@@ -276,6 +277,7 @@ export function useMintAccountInfo(
     } catch (err) {
       reportError(err, { address });
     }
+  }, [address, accountInfo]);
 }
 
 export function useTokenAccountInfo(