diff --git a/assets/js/components/setup/SetupUsingProxyWithSignIn/SetupFlowSVG.js b/assets/js/components/setup/SetupUsingProxyWithSignIn/SetupFlowSVG.js
index 2baca6d33da..bb5d8ff3856 100644
--- a/assets/js/components/setup/SetupUsingProxyWithSignIn/SetupFlowSVG.js
+++ b/assets/js/components/setup/SetupUsingProxyWithSignIn/SetupFlowSVG.js
@@ -19,7 +19,7 @@
/**
* WordPress dependencies
*/
-import { lazy, Suspense } from '@wordpress/element';
+import { Fragment, lazy, Suspense, useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
@@ -27,22 +27,68 @@ import { __ } from '@wordpress/i18n';
*/
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 (
- }>
-
-
-
-
+
+ { lazyChunks.slice( 0, chunksToShow ).map( ( ChunkSVG, index ) => (
+ }
+ >
+
+
+
+
+ ) ) }
+
);
}
diff --git a/assets/js/components/setup/SetupUsingProxyWithSignIn/SplashContent.js b/assets/js/components/setup/SetupUsingProxyWithSignIn/SplashContent.js
index 92e165c5268..06aabfa01a0 100644
--- a/assets/js/components/setup/SetupUsingProxyWithSignIn/SplashContent.js
+++ b/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 (
-
+
|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/svg/graphics/splash-screenshot-1.svg b/assets/svg/graphics/splash-screenshot-1.svg
new file mode 100644
index 00000000000..379b8a254ec
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-1.svg
@@ -0,0 +1,170 @@
+
diff --git a/assets/svg/graphics/splash-screenshot-2.svg b/assets/svg/graphics/splash-screenshot-2.svg
new file mode 100644
index 00000000000..bcb68c5b17c
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-2.svg
@@ -0,0 +1,84 @@
+
diff --git a/assets/svg/graphics/splash-screenshot-3.svg b/assets/svg/graphics/splash-screenshot-3.svg
new file mode 100644
index 00000000000..a99554b0a29
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-3.svg
@@ -0,0 +1,86 @@
+
diff --git a/assets/svg/graphics/splash-screenshot-4.svg b/assets/svg/graphics/splash-screenshot-4.svg
new file mode 100644
index 00000000000..6a747f276c5
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-4.svg
@@ -0,0 +1,115 @@
+
diff --git a/assets/svg/graphics/splash-screenshot-optimised-0.svg b/assets/svg/graphics/splash-screenshot-optimised-0.svg
new file mode 100644
index 00000000000..aad125bd535
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-optimised-0.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/svg/graphics/splash-screenshot-optimised-1.svg b/assets/svg/graphics/splash-screenshot-optimised-1.svg
new file mode 100644
index 00000000000..2ad8adecc5a
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-optimised-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/svg/graphics/splash-screenshot-optimised-2.svg b/assets/svg/graphics/splash-screenshot-optimised-2.svg
new file mode 100644
index 00000000000..37db7d3547c
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-optimised-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/svg/graphics/splash-screenshot-optimised-3.svg b/assets/svg/graphics/splash-screenshot-optimised-3.svg
new file mode 100644
index 00000000000..b87bc06383a
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-optimised-3.svg
@@ -0,0 +1 @@
+
diff --git a/assets/svg/graphics/splash-screenshot-optimised-4.svg b/assets/svg/graphics/splash-screenshot-optimised-4.svg
new file mode 100644
index 00000000000..f3398bbb5ed
--- /dev/null
+++ b/assets/svg/graphics/splash-screenshot-optimised-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
|