From eedcf33115f7f95f159b4bba15ad9719d37f66b4 Mon Sep 17 00:00:00 2001
From: Steven Luscher <steveluscher@users.noreply.github.com>
Date: Fri, 12 Jul 2024 09:23:02 -0700
Subject: [PATCH] Prevent the balance component's Suspense fallback from,
 itself, suspending (#2934)

# Summary

Turns out, this mistake was the entire reason that I needed a `startTransition()` here where one didn't make any sense. The `fallback` here could, itself, suspend.

The only reason I stuck `<Balance />` in there was so that it would hold open the same height and not cause a layout shift. Bad move. Just draw the box the size it needs to be.

# Test Plan

Select a bunch of wallets and change the cluster. Observe the balance spinner appear and disappear without causing layout shift.
---
 .../react-app/src/components/ConnectWalletMenu.tsx  | 13 ++++---------
 examples/react-app/src/components/Nav.tsx           | 11 ++++-------
 examples/react-app/src/routes/root.tsx              | 10 ++--------
 3 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/examples/react-app/src/components/ConnectWalletMenu.tsx b/examples/react-app/src/components/ConnectWalletMenu.tsx
index 31d47ed22e18..038809feb248 100644
--- a/examples/react-app/src/components/ConnectWalletMenu.tsx
+++ b/examples/react-app/src/components/ConnectWalletMenu.tsx
@@ -3,7 +3,7 @@ import { Button, Callout, DropdownMenu } from '@radix-ui/themes';
 import { StandardConnect, StandardDisconnect } from '@wallet-standard/core';
 import type { UiWallet } from '@wallet-standard/react';
 import { uiWalletAccountBelongsToUiWallet, useWallets } from '@wallet-standard/react';
-import { useContext, useRef, useState, useTransition } from 'react';
+import { useContext, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import { SelectedWalletAccountContext } from '../context/SelectedWalletAccountContext';
@@ -22,7 +22,6 @@ export function ConnectWalletMenu({ children }: Props) {
     const [selectedWalletAccount, setSelectedWalletAccount] = useContext(SelectedWalletAccountContext);
     const [error, setError] = useState<unknown | typeof NO_ERROR>(NO_ERROR);
     const [forceClose, setForceClose] = useState(false);
-    const [_isPending, startTransition] = useTransition();
     function renderItem(wallet: UiWallet) {
         return (
             <ErrorBoundary
@@ -31,16 +30,12 @@ export function ConnectWalletMenu({ children }: Props) {
             >
                 <ConnectWalletMenuItem
                     onAccountSelect={account => {
-                        startTransition(() => {
-                            setSelectedWalletAccount(account);
-                            setForceClose(true);
-                        });
+                        setSelectedWalletAccount(account);
+                        setForceClose(true);
                     }}
                     onDisconnect={wallet => {
                         if (selectedWalletAccount && uiWalletAccountBelongsToUiWallet(selectedWalletAccount, wallet)) {
-                            startTransition(() => {
-                                setSelectedWalletAccount(undefined);
-                            });
+                            setSelectedWalletAccount(undefined);
                         }
                     }}
                     onError={setError}
diff --git a/examples/react-app/src/components/Nav.tsx b/examples/react-app/src/components/Nav.tsx
index 268d5bc382d7..2397d5cc8027 100644
--- a/examples/react-app/src/components/Nav.tsx
+++ b/examples/react-app/src/components/Nav.tsx
@@ -1,15 +1,14 @@
-import { Badge, Box, DropdownMenu, Flex, Heading, Spinner } from '@radix-ui/themes';
-import { useContext, useTransition } from 'react';
+import { Badge, Box, DropdownMenu, Flex, Heading } from '@radix-ui/themes';
+import { useContext } from 'react';
 
 import { ChainContext } from '../context/ChainContext';
 import { ConnectWalletMenu } from './ConnectWalletMenu';
 
 export function Nav() {
     const { displayName: currentChainName, chain, setChain } = useContext(ChainContext);
-    const [isPending, startTransition] = useTransition();
     const currentChainBadge = (
         <Badge color="gray" style={{ verticalAlign: 'middle' }}>
-            {currentChainName} <Spinner loading={isPending} />
+            {currentChainName}
         </Badge>
     );
     return (
@@ -32,9 +31,7 @@ export function Nav() {
                             <DropdownMenu.Content>
                                 <DropdownMenu.RadioGroup
                                     onValueChange={value => {
-                                        startTransition(() => {
-                                            setChain(value as 'solana:${string}');
-                                        });
+                                        setChain(value as 'solana:${string}');
                                     }}
                                     value={chain}
                                 >
diff --git a/examples/react-app/src/routes/root.tsx b/examples/react-app/src/routes/root.tsx
index e7cc3c8c45b4..481faa623451 100644
--- a/examples/react-app/src/routes/root.tsx
+++ b/examples/react-app/src/routes/root.tsx
@@ -35,7 +35,7 @@ function Root() {
                                 </Code>
                             </Box>
                         </Flex>
-                        <Flex direction="column" align="start">
+                        <Flex direction="column" align="end">
                             <Heading as="h4" size="3">
                                 Balance
                             </Heading>
@@ -43,13 +43,7 @@ function Root() {
                                 fallback={<Text>&ndash;</Text>}
                                 key={`${selectedWalletAccount.address}:${chain}`}
                             >
-                                <Suspense
-                                    fallback={
-                                        <Spinner loading>
-                                            <Balance account={selectedWalletAccount} />
-                                        </Spinner>
-                                    }
-                                >
+                                <Suspense fallback={<Spinner loading my="1" />}>
                                     <Balance account={selectedWalletAccount} />
                                 </Suspense>
                             </ErrorBoundary>