Setup Flow Refresh: Full height screenshot PoC

assets/js/components/setup/SetupUsingProxyWithSignIn/SetupFlowSVG.js

@@ -19,30 +19,76 @@
 /**
  * WordPress dependencies
  */
-import { lazy, Suspense } from '@wordpress/element';
+import { Fragment, lazy, Suspense, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import PreviewBlock from '@/js/components/PreviewBlock';
 import MediaErrorHandler from '@/js/components/MediaErrorHandler';
+import { useWindowHeight } from '@/js/hooks/useWindowSize';
 
-const LazySVGComponent = lazy( () =>
-	import( '../../../../svg/graphics/splash-screenshot.svg' )
-);
+const lazyChunks = [
+	lazy( () =>
+		import( '../../../../svg/graphics/splash-screenshot-optimised-0.svg' )
+	),
+	lazy( () =>
+		import( '../../../../svg/graphics/splash-screenshot-optimised-1.svg' )
+	),
+	lazy( () =>
+		import( '../../../../svg/graphics/splash-screenshot-optimised-2.svg' )
+	),
+	lazy( () =>
+		import( '../../../../svg/graphics/splash-screenshot-optimised-3.svg' )
+	),
+	lazy( () =>
+		import( '../../../../svg/graphics/splash-screenshot-optimised-4.svg' )
+	),
+];
+
+const HEIGHT_THRESHOLDS = [ 0, 620, 800, 960, 1100 ];
+
+function getChunksToShow( viewportHeight ) {
+	let count = 1;
+	for (
+		let threshold = 1;
+		threshold < HEIGHT_THRESHOLDS.length;
+		threshold++
+	) {
+		if ( viewportHeight >= HEIGHT_THRESHOLDS[ threshold ] ) {
+			count = threshold + 1;
+		}
+	}
+	return count;
+}
 
 export default function SetupFlowSVG() {
+	const windowHeight = useWindowHeight();
+	const chunksToShow = useMemo(
+		() => getChunksToShow( windowHeight ),
+		[ windowHeight ]
+	);
+
+	const errorMessage = __( 'Failed to load graphic', 'google-site-kit' );
+
 	return (
-		<Suspense fallback={ <PreviewBlock width="100%" height="100%" /> }>
-			<MediaErrorHandler
-				errorMessage={ __(
-					'Failed to load graphic',
-					'google-site-kit'
-				) }
-			>
-				<LazySVGComponent />
-			</MediaErrorHandler>
-		</Suspense>
+		<Fragment>
+			{ lazyChunks.slice( 0, chunksToShow ).map( ( ChunkSVG, index ) => (
+				<Suspense
+					key={ index }
+					fallback={ <PreviewBlock width="100%" height="100%" /> }
+				>
+					<MediaErrorHandler errorMessage={ errorMessage }>
+						<ChunkSVG
+							style={ {
+								display: 'block',
+								width: '100%',
+							} }
+						/>
+					</MediaErrorHandler>
+				</Suspense>
+			) ) }
+		</Fragment>
 	);
 }

assets/js/components/setup/SetupUsingProxyWithSignIn/SplashContent.js

@@ -24,7 +24,12 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { createInterpolateElement, useCallback } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useCallback,
+	useLayoutEffect,
+	useRef,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -39,6 +44,7 @@ import SplashScreenshotSVG from './SetupFlowSVG';
 import SplashBackground from '@/svg/graphics/splash-graphic.svg';
 import Typography from '@/js/components/Typography';
 import useFormValue from '@/js/hooks/useFormValue';
+import { useWindowHeight } from '@/js/hooks/useWindowSize';
 import {
 	ANALYTICS_NOTICE_CHECKBOX,
 	ANALYTICS_NOTICE_FORM_NAME,
@@ -62,8 +68,22 @@ export default function SplashContent( {
 	showLearnMoreLink,
 	title,
 } ) {
+	const contentRef = useRef();
+	const windowHeight = useWindowHeight();
 	const { setValues } = useDispatch( CORE_FORMS );
 
+	useLayoutEffect( () => {
+		if ( contentRef.current ) {
+			const offsetFromTop =
+				contentRef.current.getBoundingClientRect().top + global.scrollY;
+			const availableHeight = windowHeight - offsetFromTop;
+			contentRef.current.style.setProperty(
+				'--googlesitekit-splash-available-height',
+				`${ Math.max( 0, availableHeight ) }px`
+			);
+		}
+	}, [ windowHeight ] );
+
 	const checked = useFormValue(
 		ANALYTICS_NOTICE_FORM_NAME,
 		ANALYTICS_NOTICE_CHECKBOX
@@ -89,7 +109,7 @@ export default function SplashContent( {
 	} );
 
 	return (
-		<Row className="googlesitekit-setup__content">
+		<Row ref={ contentRef } className="googlesitekit-setup__content">
 			<Cell
 				smSize={ 4 }
 				mdSize={ 8 }

assets/sass/components/setup/_googlesitekit-splash.scss

@@ -109,22 +109,27 @@
 
 		.googlesitekit-setup__splash-graphic-screenshot {
 			height: 100%;
+			overflow: hidden;
 			width: 100%;
 
 			@media (max-width: $bp-desktop) {
 				max-height: 230px;
 			}
 
 			svg {
+				display: block;
 				margin: 0 4%;
 				position: relative;
-				top: 40px;
 				z-index: 11;
 
 				@media (max-width: $bp-desktop) {
 					left: 0;
 				}
 			}
+
+			svg:first-child {
+				top: 40px;
+			}
 		}
 
 		.googlesitekit-setup__icon {
@@ -136,6 +141,11 @@
 				margin-bottom: $grid-gap-desktop;
 				overflow: hidden;
 			}
+
+			@media (min-width: $bp-nonTablet) {
+				max-height: var(--googlesitekit-splash-available-height);
+				overflow: hidden;
+			}
 		}
 
 		.googlesitekit-setup__content {
@@ -144,6 +154,7 @@
 			}
 
 			@media (min-width: $bp-nonTablet) {
+				min-height: var(--googlesitekit-splash-available-height);
 				padding-bottom: $grid-gap-desktop;
 			}
 		}