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` ...@@ -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() { ...@@ -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>
......
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