Position spinner

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;

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;
+`;