fix: always paint StyledPollingNumber (#2254)
Adds a en-space to StyledPollingNumber so it is always painted. Fixes a layout shift when rendering the first block number. StyledPollingNumber is taller than its container, so waiting to paint it causes a layout shift when rendering.
This commit is contained in:
parent
7b829135df
commit
4bdf3c191a
@ -31,7 +31,6 @@ const StyledPollingDot = styled.div`
|
||||
height: 8px;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
margin-left: 0.5rem;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background-color: ${({ theme }) => theme.green1};
|
||||
@ -96,7 +95,7 @@ export default function Polling() {
|
||||
>
|
||||
<StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
|
||||
<StyledPollingNumber breathe={isMounting} hovering={isHover}>
|
||||
{blockNumber}
|
||||
{blockNumber} 
|
||||
</StyledPollingNumber>
|
||||
<StyledPollingDot>{isMounting && <Spinner />}</StyledPollingDot>
|
||||
</StyledPolling>
|
||||
|
Loading…
Reference in New Issue
Block a user