Prevent the balance component's Suspense fallback from, itself, suspe…

…nding (#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.
solana-labs · Jul 12, 2024 · eedcf33 · eedcf33
1 parent e9372c8
commit eedcf33
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 24 deletions.
diff --git 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
@@ -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
@@ -35,21 +35,15 @@ function Root() {
                                 </Code>
                             </Box>
                         </Flex>
-                        <Flex direction="column" align="start">
+                        <Flex direction="column" align="end">
                             <Heading as="h4" size="3">
                                 Balance
                             </Heading>
                             <ErrorBoundary
                                 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>