diff --git a/src/app/_components/BlockList/AnimatedBlockAndMicroblocksItem.tsx b/src/app/_components/BlockList/AnimatedBlockAndMicroblocksItem.tsx index bbc039ad1..012cf434e 100644 --- a/src/app/_components/BlockList/AnimatedBlockAndMicroblocksItem.tsx +++ b/src/app/_components/BlockList/AnimatedBlockAndMicroblocksItem.tsx @@ -15,46 +15,41 @@ export const animationDuration = 0.8; export const AnimatedBlockAndMicroblocksItem: FC<{ block: EnhancedBlock; onAnimationExit?: () => void; -}> = memo( - ({ block, onAnimationExit }) => { - const [show, setShow] = useState(!block.animate); - useEffect(() => { - if (block.animate) { - setTimeout(() => { - setShow(true); - }, 100); - } - }, [block.animate]); - useEffect(() => { - if (block.destroy) { - setShow(false); - } - }, [block.destroy]); +}> = ({ block, onAnimationExit }) => { + const [show, setShow] = useState(!block.animate); + useEffect(() => { + if (block.animate) { + setTimeout(() => { + setShow(true); + }, 100); + } + }, [block.animate]); + useEffect(() => { + if (block.destroy) { + setShow(false); + } + }, [block.destroy]); - return ( - <> - - { - if (state === 'exit') { - onAnimationExit?.(); - } - }} - data-testid={`block-item-${block.hash}`} - > - - - - - ); - }, - (prevProps, currentProps) => - prevProps.block.hash === currentProps.block.hash && - prevProps.block.destroy === currentProps.block.destroy -); + return ( + <> + + { + if (state === 'exit') { + onAnimationExit?.(); + } + }} + data-testid={`block-item-${block.hash}`} + > + + + + + ); +}; diff --git a/src/app/_components/BlockList/BlockAndMicroblocksItem.tsx b/src/app/_components/BlockList/BlockAndMicroblocksItem.tsx index da484c32d..11bf1a714 100644 --- a/src/app/_components/BlockList/BlockAndMicroblocksItem.tsx +++ b/src/app/_components/BlockList/BlockAndMicroblocksItem.tsx @@ -1,4 +1,4 @@ -import React, { memo } from 'react'; +import React from 'react'; import { Block } from '@stacks/stacks-blockchain-api-types'; @@ -11,45 +11,42 @@ import { Text } from '../../../ui/Text'; import { BlockListItem } from './BlockListItem'; import { MicroblockListItem } from './MicroblockListItem'; -export const BlockAndMicroblocksItem: React.FC<{ block: Block }> = memo( - ({ block }) => { - return ( - - - - - - - - - {!!block.microblocks_accepted?.length ? ( - block.microblocks_accepted.map((microblockHash, microblockIndex) => ( - - )) - ) : ( - - No Microblocks - - )} - - - ); - }, - (prevProps, currentProps) => prevProps.block.hash === currentProps.block.hash -); +export const BlockAndMicroblocksItem: React.FC<{ block: Block }> = ({ block }) => { + return ( + + + + + + + + + {!!block.microblocks_accepted?.length ? ( + block.microblocks_accepted.map((microblockHash, microblockIndex) => ( + + )) + ) : ( + + No Microblocks + + )} + + + ); +}; diff --git a/src/app/sandbox/Wrapper.tsx b/src/app/sandbox/Wrapper.tsx index 885f81a90..3114d9c98 100644 --- a/src/app/sandbox/Wrapper.tsx +++ b/src/app/sandbox/Wrapper.tsx @@ -16,14 +16,12 @@ import { Grid } from '../../ui/Grid'; import { HStack } from '../../ui/HStack'; import { Icon } from '../../ui/Icon'; import { IconButton } from '../../ui/IconButton'; -import { useColorMode } from '../../ui/hooks/useColorMode'; import { Caption } from '../../ui/typography'; import { PageTitle } from '../_components/PageTitle'; import { useUser } from './hooks/useUser'; import { ConnectToStacks } from './layout/ConnectToStacks'; import { RightPanelSkeleton } from './layout/RightPanelSkeleton'; import { SideNav } from './layout/SideNav'; -import Loading from './loading'; import { selectShowRightPanel, setUserData, toggleRightPanel } from './sandbox-slice'; const RightPanel = dynamic(() => import('./layout/RightPanel').then(mod => mod.RightPanel), {