From 4bdf3c191aeaf9ee1d425626b2d6e5bc462ce128 Mon Sep 17 00:00:00 2001
From: Zach Pomerantz <zzmp@uniswap.org>
Date: Thu, 2 Sep 2021 10:42:07 -0700
Subject: [PATCH] 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.
---
 src/components/Header/Polling.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Header/Polling.tsx b/src/components/Header/Polling.tsx
index 4cd0353e22..925254060b 100644
--- a/src/components/Header/Polling.tsx
+++ b/src/components/Header/Polling.tsx
@@ -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>