From 8a9efd24eb54f116321637274a30f845fad08d28 Mon Sep 17 00:00:00 2001
From: umungobungo <m.mcgillivray@outlook.com>
Date: Fri, 4 Oct 2024 14:59:23 +0800
Subject: [PATCH] no layout shift on homepage

---
 packages/docs/src/components/Demo/Demo.tsx    | 34 +++++++++++++++----
 .../src/components/Demo/player.module.css     |  1 +
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/docs/src/components/Demo/Demo.tsx b/packages/docs/src/components/Demo/Demo.tsx
index c7479bf9ea..4ba7776942 100644
--- a/packages/docs/src/components/Demo/Demo.tsx
+++ b/packages/docs/src/components/Demo/Demo.tsx
@@ -1,7 +1,7 @@
 import {useColorMode} from '@docusaurus/theme-common';
 import type {PlayerRef} from '@remotion/player';
 import {Player} from '@remotion/player';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {type CSSProperties, useEffect, useRef, useState} from 'react';
 import type {LocationAndTrending} from '../../remotion/HomepageVideo/Comp';
 import {
 	HomepageVideoComp,
@@ -9,6 +9,7 @@ import {
 } from '../../remotion/HomepageVideo/Comp';
 import {ActionRow} from './ActionRow';
 import {PlayerControls} from './PlayerControls';
+import styles from './player.module.css';
 
 export const Demo: React.FC = () => {
 	const {colorMode} = useColorMode();
@@ -25,6 +26,13 @@ export const Demo: React.FC = () => {
 
 	const [isFullscreen, setIsFullscreen] = useState(false);
 
+	const playerWrapper: CSSProperties = {
+		border: '2px solid ' + strokeColor,
+		borderBottom: '4px solid ' + strokeColor,
+		borderRadius: 8,
+		width: '100%',
+	};
+
 	useEffect(() => {
 		const {current: playerRef} = ref;
 		if (!playerRef || !data) {
@@ -61,11 +69,8 @@ export const Demo: React.FC = () => {
 						controls={isFullscreen}
 						clickToPlay={false}
 						style={{
-							border: '2px solid ' + strokeColor,
-							borderBottom: '4px solid ' + strokeColor,
-							borderRadius: 8,
-							width: '100%',
-							touchAction: 'none', // prevent page from scrolling when dragging children
+							...playerWrapper,
+							touchAction: 'none', // prevent page from scrolling when dragging children on mobile
 						}}
 						inputProps={{
 							theme: colorMode,
@@ -78,7 +83,22 @@ export const Demo: React.FC = () => {
 					/>
 					<PlayerControls playerRef={ref} durationInFrames={120} fps={30} />
 				</>
-			) : null}
+			) : (
+				<>
+					<div
+						style={{
+							aspectRatio: '640 / 360',
+							...playerWrapper,
+						}}
+					/>
+					<div
+						className={styles['controls-wrapper']}
+						style={{justifyContent: 'center'}}
+					>
+						<p>Loading Player</p>
+					</div>
+				</>
+			)}
 			<ActionRow />
 		</div>
 	);
diff --git a/packages/docs/src/components/Demo/player.module.css b/packages/docs/src/components/Demo/player.module.css
index 1c20fa380c..d74067db76 100644
--- a/packages/docs/src/components/Demo/player.module.css
+++ b/packages/docs/src/components/Demo/player.module.css
@@ -4,6 +4,7 @@
 	align-items: center;
 	padding: 5px 0px;
 	border-radius: 0.5rem;
+	height: 3rem;
 
 	.start-controls {
 		display: flex;