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;
|
height: 8px;
|
||||||
min-height: 8px;
|
min-height: 8px;
|
||||||
min-width: 8px;
|
min-width: 8px;
|
||||||
margin-left: 0.5rem;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: ${({ theme }) => theme.green1};
|
background-color: ${({ theme }) => theme.green1};
|
||||||
@ -96,7 +95,7 @@ export default function Polling() {
|
|||||||
>
|
>
|
||||||
<StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
|
<StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
|
||||||
<StyledPollingNumber breathe={isMounting} hovering={isHover}>
|
<StyledPollingNumber breathe={isMounting} hovering={isHover}>
|
||||||
{blockNumber}
|
{blockNumber} 
|
||||||
</StyledPollingNumber>
|
</StyledPollingNumber>
|
||||||
<StyledPollingDot>{isMounting && <Spinner />}</StyledPollingDot>
|
<StyledPollingDot>{isMounting && <Spinner />}</StyledPollingDot>
|
||||||
</StyledPolling>
|
</StyledPolling>
|
||||||
|
Loading…
Reference in New Issue
Block a user