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:
Zach Pomerantz 2021-09-02 10:42:07 -07:00 committed by GitHub
parent 7b829135df
commit 4bdf3c191a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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}&ensp;
</StyledPollingNumber> </StyledPollingNumber>
<StyledPollingDot>{isMounting && <Spinner />}</StyledPollingDot> <StyledPollingDot>{isMounting && <Spinner />}</StyledPollingDot>
</StyledPolling> </StyledPolling>