From f866d0d30fc266694425ba4ffdb280fd554fd9f1 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Fri, 19 Jan 2024 12:03:19 +0100 Subject: [PATCH] [CYS - Core] Improve loading screen (#43791) * CYS - Core: Create dummy products * Add changefile(s) from automation for the following project(s): woocommerce * CYS - Core: Improve loading screen * fix import * Add changefile(s) from automation for the following project(s): woocommerce * update image * add missing image * fix CSS --------- Co-authored-by: github-actions --- .../assets/images/loader-turning-lights.svg | 36 +++++ .../customize-store/design-with-ai/index.tsx | 1 - .../design-with-ai/pages/ApiCallLoader.tsx | 37 +---- .../customize-store/design-with-ai/style.scss | 43 ------ .../design-without-ai/pages/ApiCallLoader.tsx | 134 ++++++++++++++++++ .../design-without-ai/state-machine.tsx | 2 +- .../client/customize-store/style.scss | 46 ++++++ .../client/customize-store/utils.js | 40 ++++++ ...3791-43456-cys-core-improve-loading-screen | 4 + 9 files changed, 262 insertions(+), 81 deletions(-) create mode 100644 plugins/woocommerce-admin/client/customize-store/assets/images/loader-turning-lights.svg delete mode 100644 plugins/woocommerce-admin/client/customize-store/design-with-ai/style.scss create mode 100644 plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx create mode 100644 plugins/woocommerce/changelog/43791-43456-cys-core-improve-loading-screen diff --git a/plugins/woocommerce-admin/client/customize-store/assets/images/loader-turning-lights.svg b/plugins/woocommerce-admin/client/customize-store/assets/images/loader-turning-lights.svg new file mode 100644 index 00000000000..8c07ed382ab --- /dev/null +++ b/plugins/woocommerce-admin/client/customize-store/assets/images/loader-turning-lights.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/index.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/index.tsx index f12ac3da1b4..16311b273e5 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/index.tsx @@ -24,7 +24,6 @@ import { } from './pages'; import { customizeStoreStateMachineEvents } from '..'; -import './style.scss'; import { isAIFlow } from '../guards'; import { navigateOrParent } from '../utils'; diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx index 076dc270f45..fd86fb4c164 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx @@ -15,6 +15,7 @@ import assemblingAiOptimizedStore from '../../assets/images/loader-assembling-ai import applyingFinishingTouches from '../../assets/images/loader-applying-the-finishing-touches.svg'; import generatingContent from '../../assets/images/loader-generating-content.svg'; import openingTheDoors from '../../assets/images/loader-opening-the-doors.svg'; +import { createAugmentedSteps } from '~/customize-store/utils'; const loaderSteps = [ { @@ -98,42 +99,6 @@ const loaderSteps = [ }, ]; -// Make the loader last longer and provide a smoother progress by duplicating the steps. -const createAugmentedSteps = ( - steps: typeof loaderSteps, - numOfDupes: number -) => { - // Duplicate each step, so we can animate each one - // (e.g. each step will be duplicated 3 times, and each duplicate will - // have different progress) - const augmentedSteps = steps - .map( ( item, index, array ) => { - // Get the next item in the array - const nextItem = array[ index + 1 ]; - // If there is no next item, we're at the end of the array - // so just return the current item - if ( ! nextItem ) return [ item ]; - - // If there is a next item, we're not at the end of the array - // so return the current item, plus duplicates - const duplicates = [ item ]; - const progressIncreaseBy = - ( nextItem.progress - item.progress ) / numOfDupes; - - for ( let i = 0; i < numOfDupes; i++ ) { - duplicates.push( { - ...item, - progress: item.progress + ( i + 1 ) * progressIncreaseBy, - } ); - } - - return duplicates; - } ) - .flat(); - - return augmentedSteps; -}; - // Loader for the API call without the last frame. export const ApiCallLoader = () => { const [ progress, setProgress ] = useState( 5 ); diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/style.scss b/plugins/woocommerce-admin/client/customize-store/design-with-ai/style.scss deleted file mode 100644 index fe602f2fb6e..00000000000 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/style.scss +++ /dev/null @@ -1,43 +0,0 @@ -.woocommerce-onboarding-loader { - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - background-color: #fff; - - .woocommerce-onboarding-loader-wrapper { - align-items: flex-start; - display: flex; - flex-direction: column; - justify-content: center; - max-width: 520px; - min-height: 400px; - - .woocommerce-onboarding-loader-container { - text-align: center; - min-height: 400px; - } - - .loader-hearticon { - position: relative; - top: 2px; - left: 2px; - } - } -} - -.woocommerce-customize-store__step-designWithAi { - .woocommerce-onboarding-loader-wrapper { - min-height: auto; - .woocommerce-onboarding-loader-container { - min-height: auto; - } - } -} - -.progress-bar.smooth-transition { - .woocommerce-onboarding-progress-bar__filler { - transition: width linear 2s; - } -} diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx new file mode 100644 index 00000000000..02fbb090a68 --- /dev/null +++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx @@ -0,0 +1,134 @@ +/** + * External dependencies + */ +import { Loader } from '@woocommerce/onboarding'; +import { __ } from '@wordpress/i18n'; +import { useEffect, useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import loaderAssemblingStore from '../../assets/images/loader-assembling-ai-optimized-store.svg'; +import loaderTurningLights from '../../assets/images/loader-turning-lights.svg'; +import openingTheDoors from '../../assets/images/loader-opening-the-doors.svg'; +import { createAugmentedSteps } from '~/customize-store/utils'; + +const loaderSteps = [ + { + title: __( 'Setting up the foundations', 'woocommerce' ), + image: ( + { + ), + progress: 25, + }, + { + title: __( 'Turning on the lights', 'woocommerce' ), + image: ( + { + ), + progress: 50, + }, + { + title: __( 'Opening the doors', 'woocommerce' ), + image: ( + { + ), + progress: 100, + }, +]; + +// Loader for the API call without the last frame. +export const ApiCallLoader = () => { + const [ progress, setProgress ] = useState( 5 ); + + useEffect( () => { + const preload = ( src: string ) => { + const img = new Image(); + + img.src = src; + img.onload = () => {}; + }; + + // We preload the these images to avoid flickering. We only need to preload them because the others are small enough to be inlined in base64. + preload( loaderAssemblingStore ); + preload( loaderTurningLights ); + preload( openingTheDoors ); + }, [] ); + + const augmentedSteps = createAugmentedSteps( + loaderSteps.slice( 0, -1 ), + 10 + ); + + return ( + + { + // to get around bad set state timing issue + setTimeout( () => { + setProgress( augmentedSteps[ index ].progress ); + }, 0 ); + } } + > + { augmentedSteps.map( ( step, index ) => ( + + + { step.image } + + { step.title } + + ) ) } + + + + ); +}; + +export const AssembleHubLoader = () => { + // Show the last two steps of the loader so that the last frame is the shortest time possible + const augmentedSteps = createAugmentedSteps( loaderSteps.slice( -2 ), 10 ); + + const [ progress, setProgress ] = useState( augmentedSteps[ 0 ].progress ); + + return ( + + { + // to get around bad set state timing issue + setTimeout( () => { + setProgress( augmentedSteps[ index ].progress ); + }, 0 ); + } } + > + { augmentedSteps.map( ( step, index ) => ( + + + { step.image } + + { step.title } + + ) ) } + + + + ); +}; diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx index f771f32e088..1b2b513d4e6 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx +++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx @@ -8,7 +8,7 @@ import { getQuery } from '@woocommerce/navigation'; * Internal dependencies */ -import { ApiCallLoader, AssembleHubLoader } from '../design-with-ai/pages'; +import { ApiCallLoader, AssembleHubLoader } from './pages/ApiCallLoader'; import { FlowType } from '../types'; import { DesignWithoutAIStateMachineContext } from './types'; diff --git a/plugins/woocommerce-admin/client/customize-store/style.scss b/plugins/woocommerce-admin/client/customize-store/style.scss index 390c68bb54d..9da00ce56f0 100644 --- a/plugins/woocommerce-admin/client/customize-store/style.scss +++ b/plugins/woocommerce-admin/client/customize-store/style.scss @@ -221,3 +221,49 @@ body.woocommerce-customize-store.js.is-fullscreen-mode { justify-content: flex-end; } } + +.woocommerce-onboarding-loader { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: #fff; + + .woocommerce-onboarding-loader-wrapper { + align-items: flex-start; + display: flex; + flex-direction: column; + justify-content: center; + max-width: 520px; + min-height: 400px; + + .woocommerce-onboarding-loader-container { + text-align: center; + min-height: 400px; + } + + .loader-hearticon { + position: relative; + top: 2px; + left: 2px; + } + } +} + +.woocommerce-customize-store__step-designWithAi, +.woocommerce-customize-store__step-designWithoutAi { + .woocommerce-onboarding-loader-wrapper { + min-height: auto; + .woocommerce-onboarding-loader-container { + min-height: auto; + } + } +} + +.progress-bar.smooth-transition { + .woocommerce-onboarding-progress-bar__filler { + transition: width linear 2s; + } +} + diff --git a/plugins/woocommerce-admin/client/customize-store/utils.js b/plugins/woocommerce-admin/client/customize-store/utils.js index 74f123befc6..d2175d52147 100644 --- a/plugins/woocommerce-admin/client/customize-store/utils.js +++ b/plugins/woocommerce-admin/client/customize-store/utils.js @@ -101,3 +101,43 @@ export const setLogoWidth = ( content, width = DEFAULT_LOGO_WIDTH ) => { return ``; } ); }; + +/** + * Create augmented steps for animation + * + * @param {Array} steps + * @param {number} numOfDupes + * @return {Array} augmentedSteps + * + */ +export const createAugmentedSteps = ( steps, numOfDupes ) => { + // Duplicate each step, so we can animate each one + // (e.g. each step will be duplicated 3 times, and each duplicate will + // have different progress) + const augmentedSteps = steps + .map( ( item, index, array ) => { + // Get the next item in the array + const nextItem = array[ index + 1 ]; + // If there is no next item, we're at the end of the array + // so just return the current item + if ( ! nextItem ) return [ item ]; + + // If there is a next item, we're not at the end of the array + // so return the current item, plus duplicates + const duplicates = [ item ]; + const progressIncreaseBy = + ( nextItem.progress - item.progress ) / numOfDupes; + + for ( let i = 0; i < numOfDupes; i++ ) { + duplicates.push( { + ...item, + progress: item.progress + ( i + 1 ) * progressIncreaseBy, + } ); + } + + return duplicates; + } ) + .flat(); + + return augmentedSteps; +}; diff --git a/plugins/woocommerce/changelog/43791-43456-cys-core-improve-loading-screen b/plugins/woocommerce/changelog/43791-43456-cys-core-improve-loading-screen new file mode 100644 index 00000000000..d6f8b7f8f33 --- /dev/null +++ b/plugins/woocommerce/changelog/43791-43456-cys-core-improve-loading-screen @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +[CYS - Core] Improve loading screen. \ No newline at end of file