From 74fd98c398320d684dd1039cc8f1cbd6a422ce38 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:58:56 +0530
Subject: [PATCH] Position spinner

---
 web/apps/cast/src/components/PairingCode.tsx |  3 +++
 web/apps/cast/src/pages/index.tsx            | 24 ++++++++++----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/apps/cast/src/components/PairingCode.tsx b/web/apps/cast/src/components/PairingCode.tsx
index 7649e4dea6..fa1474bafc 100644
--- a/web/apps/cast/src/components/PairingCode.tsx
+++ b/web/apps/cast/src/components/PairingCode.tsx
@@ -48,6 +48,9 @@ export const PairingCode: React.FC<PairingCodeProps> = ({ code }) => {
 };
 
 const PairingCode_ = styled("div")`
+    border-radius: 10px;
+    overflow: hidden;
+
     font-size: 4rem;
     font-weight: bold;
     font-family: monospace;
diff --git a/web/apps/cast/src/pages/index.tsx b/web/apps/cast/src/pages/index.tsx
index c70f7e981b..949ea3fb4e 100644
--- a/web/apps/cast/src/pages/index.tsx
+++ b/web/apps/cast/src/pages/index.tsx
@@ -71,18 +71,7 @@ export default function Index() {
             <h1>
                 Enter this code on <b>Ente Photos</b> to pair this screen
             </h1>
-            <div
-                style={{
-                    borderRadius: "10px",
-                    overflow: "hidden",
-                }}
-            >
-                {pairingCode ? (
-                    <PairingCode code={pairingCode} />
-                ) : (
-                    <EnteSpinner />
-                )}
-            </div>
+            {pairingCode ? <PairingCode code={pairingCode} /> : <Spinner />}
             <p
                 style={{
                     fontSize: "1.2rem",
@@ -118,3 +107,14 @@ const Container = styled("div")`
         font-weight: normal;
     }
 `;
+
+const Spinner: React.FC = () => (
+    <Spinner_>
+        <EnteSpinner />
+    </Spinner_>
+);
+
+const Spinner_ = styled("div")`
+    /* Roughly same height as the pairing code section to roduce layout shift */
+    margin-block: 1.7rem;
+`;