diff --git a/src/app/components/crypto-asset-item/crypto-asset-item-toggle.tsx b/src/app/components/crypto-asset-item/crypto-asset-item-toggle.tsx index 1c464642d8..8f9ea19456 100644 --- a/src/app/components/crypto-asset-item/crypto-asset-item-toggle.tsx +++ b/src/app/components/crypto-asset-item/crypto-asset-item-toggle.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useRef, useTransition } from 'react'; import { useDispatch } from 'react-redux'; import { sanitize } from 'dompurify'; @@ -28,18 +28,29 @@ export function CryptoAssetItemToggle({ const accountIndex = useCurrentAccountIndex(); const dispatch = useDispatch(); - const [isChecked, setIsChecked] = useState(isCheckedByDefault); + const switchRef = useRef(null); + const [_isPending, transition] = useTransition(); function handleSelection(enabled: boolean) { - setIsChecked(enabled); - dispatch( - manageTokensSlice.actions.userTogglesTokenVisibility({ id: assetId, enabled, accountIndex }) - ); + transition(() => { + dispatch( + manageTokensSlice.actions.userTogglesTokenVisibility({ + id: assetId, + enabled, + accountIndex, + }) + ); + }); } const toggle = ( - + @@ -47,7 +58,7 @@ export function CryptoAssetItemToggle({ return ( - handleSelection(!isChecked)} data-testid={sanitize(assetId)}> + switchRef.current?.click()} data-testid={sanitize(assetId)}>