diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.scss b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.scss new file mode 100644 index 00000000000..6ec80b9d144 --- /dev/null +++ b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.scss @@ -0,0 +1,29 @@ +.launch-store-site-preview-page__container { + height: 100vh; + width: 100%; + padding: 16px 16px 16px 0; + position: relative; + + .launch-store-site__preview-site-iframe { + display: block; + border: none; + width: 100%; + height: 100%; + border-radius: 20px; + box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.04), 0 13px 15px 0 rgba(0, 0, 0, 0.03), 0 6px 10px 0 rgba(0, 0, 0, 0.02), 0 0 1px 0 rgba(0, 0, 0, 0.25); + overflow-y: auto; + } + + .launch-store-site-preview-site__loading-overlay { + border-radius: 20px; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + background-color: #fff; + opacity: 0.9; + height: calc(100% - 32px); + width: calc(100% - 16px); + } +} diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx index be23fa40a09..23e5a8eb418 100644 --- a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx +++ b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx @@ -2,20 +2,65 @@ * External dependencies */ import classnames from 'classnames'; +import { useState, useRef, useEffect } from '@wordpress/element'; +import { Spinner } from '@woocommerce/components'; + /** * Internal dependencies */ +import { getAdminSetting } from '~/utils/admin-settings'; import type { MainContentComponentProps } from '../xstate'; +import './site-preview.scss'; export const SitePreviewPage = ( props: MainContentComponentProps ) => { + const siteUrl = getAdminSetting( 'siteUrl' ) + '?site-preview=1'; + const [ isLoading, setIsLoading ] = useState( true ); + const iframeRef = useRef< HTMLIFrameElement >( null ); + + useEffect( () => { + const iframeContentWindow = iframeRef.current?.contentWindow; + + const beforeUnloadHandler = () => { + setIsLoading( true ); + }; + + if ( iframeContentWindow ) { + iframeContentWindow.addEventListener( + 'beforeunload', + beforeUnloadHandler + ); + } + return () => { + if ( iframeContentWindow ) { + iframeContentWindow.removeEventListener( + 'beforeunload', + beforeUnloadHandler + ); + } + }; + // IsLoading is a dependency because we want to reset it when the iframe reloads. + }, [ iframeRef, setIsLoading, isLoading ] ); + return (
-

Main Content - Site Preview

+ { isLoading && ( +
+ +
+ ) } +