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