[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 <github-actions@github.com>
This commit is contained in:
Luigi Teschio
GitHub
parent
a0988461ec
commit
f866d0d30f
|
|
@ -0,0 +1,36 @@
|
|||
<svg width="210" height="136" viewBox="0 0 210 136" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1345_11791)">
|
||||
<rect width="209.829" height="136" transform="translate(0.0859375)"/>
|
||||
<path d="M172.091 48.5791C151.611 48.5791 138.348 59.3299 138.348 75.8539C138.348 96.4511 160.181 99.2459 160.181 109.98H184C184 99.2425 205.833 96.4511 205.833 75.8539C205.833 59.3299 192.567 48.5791 172.091 48.5791Z" fill="#BEA0F2"/>
|
||||
<path d="M38.049 4.10718C13.8864 4.10718 0.313868 22.7562 5.13278 36.788C10.387 52.1152 26.6224 59.1056 26.6224 79.254H49.4825C49.4825 59.1056 65.7144 52.1152 70.972 36.788C75.7875 22.7562 62.215 4.10718 38.049 4.10718Z" fill="#BEA0F2"/>
|
||||
<path d="M48.6696 46.8928C43.0821 46.8928 39.7969 50.5784 39.7969 56.2768V56.984C39.4024 56.984 38.9943 56.984 38.6066 56.9874H37.8653C37.3007 56.9874 36.964 56.9874 36.3043 56.9874V56.2802C36.3043 50.5784 33.0191 46.8928 27.4316 46.8928C22.4563 46.8928 19.603 48.7696 19.603 52.0336C19.603 54.485 21.9904 56.1408 26.7005 56.9568C29.5809 57.4566 32.373 57.579 35.131 57.6062V79.2506H36.3043V57.6096C36.964 57.613 37.2973 57.613 37.8653 57.6096C38.4298 57.6096 39.1371 57.6096 39.7969 57.6096V79.2472H40.9702V57.6028C43.7282 57.5756 46.5203 57.4532 49.4007 56.9534C54.1108 56.1374 56.4982 54.4816 56.4982 52.0302C56.4982 48.7628 53.6449 46.8894 48.6696 46.8894V46.8928ZM35.1344 56.9772C32.4036 56.9466 29.649 56.8276 26.8195 56.338C22.4631 55.5832 21.283 53.7914 21.283 51.9248C21.283 48.586 24.7552 47.5218 27.4384 47.5218C32.4342 47.5218 35.1378 50.9592 35.1378 56.2768V56.9806L35.1344 56.9772ZM49.2851 56.338C46.4522 56.8276 43.701 56.95 40.9702 56.9772V56.2734C40.9702 50.9558 43.6738 47.5184 48.6696 47.5184C51.3494 47.5184 54.8216 48.5826 54.8216 51.9214C54.8216 53.788 53.6381 55.5798 49.2817 56.3346L49.2851 56.338Z" fill="white"/>
|
||||
<path d="M205.834 4.08008H149.802L144.279 50.3575L155.669 38.3487H201.64L205.834 4.08008Z" fill="#271B3D"/>
|
||||
<path d="M125.888 103.146C122.317 98.1377 120.267 95.7339 116.237 95.7339C111.816 95.7339 109.874 100.739 112.53 103.867C115.451 107.307 125.939 110.898 125.939 110.898C125.939 110.898 102.865 107.828 96.8862 107.828C93.5874 107.828 90.207 109.902 90.207 113.839C90.207 117.776 93.5874 119.85 96.8862 119.85C102.865 119.85 125.939 116.78 125.939 116.78C125.939 116.78 115.448 120.37 112.53 123.811C109.877 126.939 111.816 131.944 116.237 131.944C120.27 131.944 122.321 129.543 125.888 124.532C127.099 122.835 133.247 113.835 133.247 113.835C133.247 113.835 127.099 104.839 125.888 103.139V103.146Z" fill="#271B3D"/>
|
||||
<path d="M75.9232 82.6199L134.077 82.6199V65.6199H75.9232V82.6199Z" fill="#BEA0F2"/>
|
||||
<path d="M117.073 65.6199H75.9233V69.0199H117.073V65.6199Z" fill="#271B3D"/>
|
||||
<path d="M133.907 72.4539H76.0933V75.8539H133.907V72.4539Z" fill="#271B3D"/>
|
||||
<path d="M108.571 79.22H75.9233V82.62H108.571V79.22Z" fill="#271B3D"/>
|
||||
<path d="M84.0852 95.54H47.6968V131.92H84.0852V95.54Z" fill="#BEA0F2"/>
|
||||
<path d="M68.5095 120.068L75.0459 114.043L54.8384 114.114V113.118L75.0255 113.186L68.5129 107.185L69.1149 106.42L76.6952 113.557V113.672L69.1149 120.833L68.5129 120.068H68.5095Z" fill="#271B3D"/>
|
||||
<path d="M166.527 19.9988L170.618 31.79L190.659 9.42139" stroke="white" stroke-width="0.971429" stroke-miterlimit="10"/>
|
||||
<path d="M181.45 88.3354C181.45 82.3616 177.872 78.6454 172.111 78.625C172.111 78.625 172.098 78.625 172.091 78.625C172.084 78.625 172.077 78.625 172.07 78.625C166.31 78.6454 162.732 82.8342 162.732 88.3354C162.732 93.8366 166.116 96.4512 170.941 99.892C168.02 102.619 166.456 106.933 166.456 109.976H168.911C168.911 107.154 169.452 103.153 172.091 100.786C174.733 103.153 175.271 107.154 175.271 109.976H177.726C177.726 106.933 176.158 102.615 173.24 99.892C178.066 96.4512 181.45 93.5374 181.45 88.3354ZM172.091 99.2426C167.306 95.8494 163.834 93.6904 163.834 88.3354C163.834 82.9804 167.133 79.6246 172.091 79.6144C177.049 79.6246 180.348 83.1606 180.348 88.3354C180.348 92.9764 176.876 95.8494 172.091 99.2426Z" fill="#271B3D"/>
|
||||
<path d="M40.8955 123.76C40.8955 128.224 37.3023 131.852 32.8448 131.92H12.347C7.83168 131.923 4.16699 128.268 4.16699 123.76C4.16699 119.252 7.82827 115.6 12.347 115.6H32.855C37.3057 115.6 40.8921 119.303 40.8921 123.76H40.8955Z" fill="#BEA0F2"/>
|
||||
<path d="M32.628 129.54C35.821 129.54 38.4094 126.952 38.4094 123.76C38.4094 120.568 35.821 117.98 32.628 117.98C29.4351 117.98 26.8467 120.568 26.8467 123.76C26.8467 126.952 29.4351 129.54 32.628 129.54Z" fill="#271B3D"/>
|
||||
<path d="M133.907 4.10718H76.0938V61.9072H133.907V4.10718Z" fill="#271B3D"/>
|
||||
<path d="M116.974 42.1361C116.974 38.1377 114.529 34.3093 109.731 31.6981H124.67L110.731 8.70728H99.2733L85.3335 31.6981H100.273C95.4746 34.3093 93.0295 38.1377 93.0295 42.1361C93.0295 46.6615 96.5765 51.2277 101.253 53.6723C94.7843 52.3667 93.7709 57.3001 93.7709 57.3001H116.24C116.24 57.3001 115.226 52.3667 108.758 53.6723C113.434 51.2277 116.981 46.6615 116.981 42.1361H116.974Z" fill="white"/>
|
||||
<path d="M105 8.71069H99.2733L85.3301 31.6981H100.27H109.731H124.67L110.727 8.71069H105Z" fill="#BEA0F2"/>
|
||||
<path d="M120.032 24.0515H89.9688L85.3301 31.6981L120.032 24.0515Z" fill="white"/>
|
||||
<path d="M115.393 16.4016H94.6074L89.9688 24.0516L115.393 16.4016Z" fill="white"/>
|
||||
<path d="M110.727 8.71069H99.2733L94.6074 16.4015L110.727 8.71069Z" fill="white"/>
|
||||
<path d="M46.5747 25.2382C55.6174 16.0378 63.8337 12.7433 73.0634 11.2812" stroke="#271B3D" stroke-width="0.971429" stroke-miterlimit="10"/>
|
||||
<path d="M68.6966 28.6041L46.9111 11.0737" stroke="#271B3D" stroke-width="0.971429" stroke-miterlimit="10"/>
|
||||
<path d="M55.6172 34.136C58.5793 24.854 59.6607 12.8928 57.7529 4.10376" stroke="#271B3D" stroke-width="0.971429" stroke-miterlimit="10"/>
|
||||
<path d="M21.4053 79.2539V82.6539H26.6187C26.6187 82.6981 26.6187 83.8779 26.6187 83.9187C26.6969 89.4913 31.9035 94.4893 38.0487 94.4893C44.1939 94.4893 49.3903 89.5015 49.4788 83.9323C49.4788 83.8847 49.4788 82.7015 49.4788 82.6539H54.6922V79.2539H21.4053Z" fill="#271B3D"/>
|
||||
<path d="M188.391 113.38V109.98H155.788V113.38H160.178C160.178 113.628 160.178 114.213 160.178 114.944H155.788V118.344H160.178C160.178 119.405 160.178 120.258 160.178 120.282C160.178 125.708 164.793 131.947 172.091 131.947C179.389 131.947 184.004 125.705 184.004 120.282C184.004 120.255 184.004 119.425 184.004 118.344H188.394V114.944H184.004C184.004 114.213 184.004 113.631 184.004 113.38H188.391Z" fill="#271B3D"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1345_11791">
|
||||
<rect width="209.829" height="136" fill="white" transform="translate(0.0859375)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
|
|
@ -24,7 +24,6 @@ import {
|
|||
} from './pages';
|
||||
import { customizeStoreStateMachineEvents } from '..';
|
||||
|
||||
import './style.scss';
|
||||
import { isAIFlow } from '../guards';
|
||||
import { navigateOrParent } from '../utils';
|
||||
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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: (
|
||||
<img
|
||||
src={ loaderAssemblingStore }
|
||||
alt={ __( 'Setting up the foundations', 'woocommerce' ) }
|
||||
/>
|
||||
),
|
||||
progress: 25,
|
||||
},
|
||||
{
|
||||
title: __( 'Turning on the lights', 'woocommerce' ),
|
||||
image: (
|
||||
<img
|
||||
src={ loaderTurningLights }
|
||||
alt={ __( 'Turning on the lights', 'woocommerce' ) }
|
||||
/>
|
||||
),
|
||||
progress: 50,
|
||||
},
|
||||
{
|
||||
title: __( 'Opening the doors', 'woocommerce' ),
|
||||
image: (
|
||||
<img
|
||||
src={ openingTheDoors }
|
||||
alt={ __( 'Opening the doors', 'woocommerce' ) }
|
||||
/>
|
||||
),
|
||||
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 (
|
||||
<Loader>
|
||||
<Loader.Sequence
|
||||
interval={ ( 5 * 1000 ) / ( augmentedSteps.length - 1 ) }
|
||||
shouldLoop={ false }
|
||||
onChange={ ( index ) => {
|
||||
// to get around bad set state timing issue
|
||||
setTimeout( () => {
|
||||
setProgress( augmentedSteps[ index ].progress );
|
||||
}, 0 );
|
||||
} }
|
||||
>
|
||||
{ augmentedSteps.map( ( step, index ) => (
|
||||
<Loader.Layout key={ index }>
|
||||
<Loader.Illustration>
|
||||
{ step.image }
|
||||
</Loader.Illustration>
|
||||
<Loader.Title>{ step.title }</Loader.Title>
|
||||
</Loader.Layout>
|
||||
) ) }
|
||||
</Loader.Sequence>
|
||||
<Loader.ProgressBar
|
||||
className="smooth-transition"
|
||||
progress={ progress || 0 }
|
||||
/>
|
||||
</Loader>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<Loader>
|
||||
<Loader.Sequence
|
||||
interval={ ( 2 * 1000 ) / ( augmentedSteps.length - 1 ) }
|
||||
shouldLoop={ false }
|
||||
onChange={ ( index ) => {
|
||||
// to get around bad set state timing issue
|
||||
setTimeout( () => {
|
||||
setProgress( augmentedSteps[ index ].progress );
|
||||
}, 0 );
|
||||
} }
|
||||
>
|
||||
{ augmentedSteps.map( ( step, index ) => (
|
||||
<Loader.Layout key={ index }>
|
||||
<Loader.Illustration>
|
||||
{ step.image }
|
||||
</Loader.Illustration>
|
||||
<Loader.Title>{ step.title }</Loader.Title>
|
||||
</Loader.Layout>
|
||||
) ) }
|
||||
</Loader.Sequence>
|
||||
<Loader.ProgressBar
|
||||
className="smooth-transition"
|
||||
progress={ progress || 0 }
|
||||
/>
|
||||
</Loader>
|
||||
);
|
||||
};
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -101,3 +101,43 @@ export const setLogoWidth = ( content, width = DEFAULT_LOGO_WIDTH ) => {
|
|||
return `<!-- wp:site-logo {"width":${ width }} /-->`;
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* 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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
[CYS - Core] Improve loading screen.
|
||||
Loading…
Reference in New Issue