no layout shift on homepage

UmungoBungo · Oct 4, 2024 · 8a9efd2 · 8a9efd2
1 parent b8f3d48
commit 8a9efd2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/packages/docs/src/components/Demo/Demo.tsx b/packages/docs/src/components/Demo/Demo.tsx
@@ -1,14 +1,15 @@
 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,
 	getDataAndProps,
 } 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
@@ -4,6 +4,7 @@
 	align-items: center;
 	padding: 5px 0px;
 	border-radius: 0.5rem;
+	height: 3rem;
 
 	.start-controls {
 		display: flex;