Commit 4bdf3c19 authored by Zach Pomerantz's avatar Zach Pomerantz Committed by GitHub

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.
parent 7b829135
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment