Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stepper: Unify loading states #99158

Merged
merged 19 commits into from
Feb 6, 2025
Merged

Stepper: Unify loading states #99158

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
adf6316
First iteration on the unified loading bar
escapemanuele Jan 31, 2025
5a9e218
Unused progress in launchpad
escapemanuele Feb 4, 2025
9a2ba9d
Change checkout margin and color
escapemanuele Feb 4, 2025
60b0eaf
Fix StepperLoader
escapemanuele Feb 4, 2025
bc200de
Handle wooexpress
escapemanuele Feb 4, 2025
887ce2a
Fix types
escapemanuele Feb 4, 2025
0add66f
Remove old classnames and address wooexpress
escapemanuele Feb 5, 2025
c261e19
Handle boot fallback missing padding
escapemanuele Feb 5, 2025
6ad3813
Fix bigsky, launchpad, tailoredcheckout
escapemanuele Feb 5, 2025
346052b
Unused CSS
escapemanuele Feb 5, 2025
bd519a4
Fix wooexpress
escapemanuele Feb 5, 2025
1bd9188
Remove unused classname
escapemanuele Feb 5, 2025
149af33
Fix site launch
escapemanuele Feb 5, 2025
90eed85
Not show bar if error on bigsky
escapemanuele Feb 5, 2025
3258912
Converte progress to 0-100
escapemanuele Feb 5, 2025
b045f3b
Fix tailored logic
escapemanuele Feb 5, 2025
8a488c7
Default to undefined for progress
escapemanuele Feb 5, 2025
fcf9c42
Missing useEffect
escapemanuele Feb 5, 2025
b370cf5
Fit unit test
escapemanuele Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions client/landing/stepper/declarative-flow/internals/components/stepper-loader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,30 @@
import { ProgressBar } from '@wordpress/components';
import clsx from 'clsx';
import WordPressLogo from 'calypso/components/wordpress-logo';
import './style.scss';

const StepperLoader = () => {
/* eslint-disable wpcalypso/jsx-classname-namespace */
return <WordPressLogo size={ 72 } className={ clsx( 'wpcom-site__logo', 'stepper-loader' ) } />;
interface StepperLoaderProps {
title?: string;
subtitle?: React.ReactNode;
progress?: number;
className?: string;
}

const StepperLoader: React.FC< StepperLoaderProps > = ( {
title,
subtitle,
progress = -1,
className,
} ) => {
return (
<div className={ clsx( 'stepper-loader', className ) }>
<h1 className="stepper-loader__title">{ title }</h1>
<ProgressBar
value={ progress >= 0 ? progress * 100 : undefined }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably make the progress prop range from 0-100 and do the calculation on the consumer side. This way we can just do

Suggested change
progress = -1,
className,
} ) => {
return (
<div className={ clsx( 'stepper-loader', className ) }>
<h1 className="stepper-loader__title">{ title }</h1>
<ProgressBar
value={ progress >= 0 ? progress * 100 : undefined }
progress,
className,
} ) => {
return (
<div className={ clsx( 'stepper-loader', className ) }>
<h1 className="stepper-loader__title">{ title }</h1>
<ProgressBar
value={ progress }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the codebase to use setProgress with 0-100 in mind. But to have the indefinite loading (the bar that doesn't follow numbers but goes on indefinitely), we have to not pass a number to value, as

const isIndeterminate = ! Number.isFinite( value );

Any suggestion?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now we're failing over to -1 when it's undefined, so if remove the -1, it will be undefined.

className="stepper-loader__progress-bar"
/>
{ subtitle && <p className="stepper-loader__subtitle">{ subtitle }</p> }
</div>
);
};

export default StepperLoader;
42 changes: 41 additions & 1 deletion client/landing/stepper/declarative-flow/internals/components/stepper-loader/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,43 @@
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@automattic/onboarding/styles/mixins";

.stepper-loader {
animation: loading-fade 1.6s ease-in-out infinite;
--wp-components-color-foreground: #3858e9;
padding: 1em;
max-width: 540px;
margin: 32vh auto 0;

&.stepper-loader__boot {
margin-top: calc(32vh + 60px);
}

.stepper-loader__title {
@include onboarding-font-recoleta;
font-weight: 400;
height: 40px;
letter-spacing: -0.4px;
line-height: 40px;
margin: 0;
text-align: center;
vertical-align: middle;

font-size: $font-title-medium;

@include break-medium {
font-size: $font-title-large;
}
}

.stepper-loader__progress-bar {
margin: 46px auto 0 auto;
}

.stepper-loader__subtitle {
font-size: 1rem;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--studio-gray-50);
margin-top: 24px;
}
}
30 changes: 16 additions & 14 deletions client/landing/stepper/declarative-flow/internals/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,8 @@ button {
.hundred-year-domain,
.link-in-bio-tld,
.entrepreneur,
.generate-content {
.generate-content,
.processing {
box-sizing: border-box;

&.step-route {
Expand Down Expand Up @@ -226,6 +227,10 @@ button {

}

.step-route.onboarding {
margin: 0 auto;
}

.import-focused .step-container.site-picker,
.import-hosted-site .step-container.site-picker {
max-width: 1280px;
Expand Down Expand Up @@ -401,17 +406,6 @@ button {
}
}

.wooexpress,
.copy-site,
.ecommerce {
.step-container.processing-step {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25vh;
}
}

.assign-trial-plan,
.processing {
&.wooexpress,
Expand Down Expand Up @@ -449,13 +443,21 @@ button {
}

.wooexpress {
.step-container.processing-step {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 9vh;
}
.step-container .step-container__content h1 {
font-family: proxima-nova, sans-serif;
font-weight: 600;
font-size: $font-title-large;
}
.loading-bar {
.stepper-loader__progress-bar {
--wp-components-color-foreground: var(--wooexpress-purple);
background-color: var(--studio-woocommerce-purple-5);
height: 6px;
width: 590px;
max-width: 100%;
margin-left: auto;
Expand All @@ -470,7 +472,7 @@ button {
max-width: 640px;
box-sizing: border-box;
}
p.processing-step__subtitle {
p.stepper-loader__subtitle {
font-family: "SF Pro Text", $sans;
font-weight: 400;
letter-spacing: initial;
Expand Down
6 changes: 5 additions & 1 deletion client/landing/stepper/declarative-flow/internals/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Modal from 'react-modal';
import { generatePath, useParams } from 'react-router';
import { Route, Routes } from 'react-router-dom';
import DocumentHead from 'calypso/components/data/document-head';
import WordPressLogo from 'calypso/components/wordpress-logo';
import { STEPPER_INTERNAL_STORE } from 'calypso/landing/stepper/stores';
import AsyncCheckoutModal from 'calypso/my-sites/checkout/modal/async';
import { useSelector } from 'calypso/state';
Expand Down Expand Up @@ -156,6 +157,9 @@ export const FlowRenderer: React.FC< { flow: Flow; steps: readonly StepperStep[]
const renderStep = ( step: StepperStep ) => {
switch ( assertCondition.state ) {
case AssertConditionState.CHECKING:
if ( isWooExpressFlow( flow.name ) ) {
return <WordPressLogo size={ 72 } className="wpcom-site__logo stepper-loader" />;
}
return <StepperLoader />;
case AssertConditionState.FAILURE:
return null;
Expand Down Expand Up @@ -230,7 +234,7 @@ export const FlowRenderer: React.FC< { flow: Flow; steps: readonly StepperStep[]
useSignUpStartTracking( { flow } );

return (
<Boot fallback={ <StepperLoader /> }>
<Boot fallback={ <StepperLoader className="stepper-loader__boot" /> }>
<DocumentHead title={ getDocumentHeadTitle() } />

<Routes>
Expand Down
28 changes: 8 additions & 20 deletions ...t/landing/stepper/declarative-flow/internals/steps-repository/assign-trial-plan/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { isWooExpressFlow, StepContainer } from '@automattic/onboarding';
import { StepContainer } from '@automattic/onboarding';
import { useSelect } from '@wordpress/data';
import { useI18n } from '@wordpress/react-i18n';
import { useEffect } from 'react';
import DocumentHead from 'calypso/components/data/document-head';
import { LoadingBar } from 'calypso/components/loading-bar';
import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
import { StepperLoader } from 'calypso/landing/stepper/declarative-flow/internals/components';
import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import wpcom from 'calypso/lib/wp';
Expand All @@ -14,7 +13,7 @@ import type { OnboardSelect } from '@automattic/data-stores';

import './styles.scss';

const AssignTrialPlanStep: Step = function AssignTrialPlanStep( { navigation, data, flow } ) {
const AssignTrialPlanStep: Step = function AssignTrialPlanStep( { navigation, data } ) {
const { submit } = navigation;
const { __ } = useI18n();
const progress = useSelect(
Expand Down Expand Up @@ -76,24 +75,13 @@ const AssignTrialPlanStep: Step = function AssignTrialPlanStep( { navigation, da
shouldHideNavButtons
hideFormattedHeader
stepName="assign-trial-step"
isHorizontalLayout
recordTracksEvent={ recordTracksEvent }
stepContent={
<>
<div className="assign-trial-step">
<h1 className="assign-trial-step__progress-step">{ getCurrentMessage() }</h1>
{ progress >= 0 || isWooExpressFlow( flow ) ? (
<LoadingBar progress={ progress } />
) : (
<LoadingEllipsis />
) }
{ isWooExpressFlow( flow ) ? (
<p className="processing-step__subtitle">{ getSubTitle() }</p>
) : (
<></>
) }
</div>
</>
<StepperLoader
title={ getCurrentMessage() }
subtitle={ getSubTitle() }
progress={ progress }
/>
}
showFooterWooCommercePowered={ false }
/>
Expand Down
2 changes: 0 additions & 2 deletions ...landing/stepper/declarative-flow/internals/steps-repository/assign-trial-plan/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,12 @@
padding: 1em;
max-width: 540px;
text-align: center;
margin: 16vh auto 0;
}

> .assign-trial-step {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25vh;
}

.step-container {
Expand Down
18 changes: 6 additions & 12 deletions client/landing/stepper/declarative-flow/internals/steps-repository/create-site/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,10 @@ import { useI18n } from '@wordpress/react-i18n';
import { getQueryArg } from '@wordpress/url';
import { useEffect } from 'react';
import DocumentHead from 'calypso/components/data/document-head';
import { LoadingBar } from 'calypso/components/loading-bar';
import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
import useAddEcommerceTrialMutation from 'calypso/data/ecommerce/use-add-ecommerce-trial-mutation';
import useAddTempSiteToSourceOptionMutation from 'calypso/data/site-migration/use-add-temp-site-mutation';
import { useSourceMigrationStatusQuery } from 'calypso/data/site-migration/use-source-migration-status-query';
import { StepperLoader } from 'calypso/landing/stepper/declarative-flow/internals/components';
import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
Expand Down Expand Up @@ -310,18 +309,13 @@ const CreateSite: Step = function CreateSite( { navigation, flow, data } ) {
shouldHideNavButtons
hideFormattedHeader
stepName="create-site"
isHorizontalLayout
recordTracksEvent={ recordTracksEvent }
stepContent={
<>
<h1>{ getCurrentMessage() }</h1>
{ progress >= 0 || isWooExpressFlow( flow ) ? (
<LoadingBar progress={ progress } />
) : (
<LoadingEllipsis />
) }
{ subTitle && <p className="processing-step__subtitle">{ subTitle }</p> }
</>
<StepperLoader
title={ getCurrentMessage() }
subtitle={ subTitle }
progress={ progress }
/>
}
showFooterWooCommercePowered={ false }
/>
Expand Down
1 change: 0 additions & 1 deletion client/landing/stepper/declarative-flow/internals/steps-repository/create-site/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ $font-family: "SF Pro Text", $sans;
padding: 1em;
max-width: 540px;
text-align: center;
margin: 16vh auto 0;

.step-container__content {
margin: auto;
Expand Down
23 changes: 9 additions & 14 deletions client/landing/stepper/declarative-flow/internals/steps-repository/launch-big-sky/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Onboard } from '@automattic/data-stores';
import { getAssemblerDesign } from '@automattic/design-picker';
import { ProgressBar } from '@wordpress/components';
import { resolveSelect, useDispatch, useSelect } from '@wordpress/data';
import { useI18n } from '@wordpress/react-i18n';
import { useEffect, FormEvent, useState } from 'react';
import wpcomRequest from 'wpcom-proxy-request';
import { StepperLoader } from 'calypso/landing/stepper/declarative-flow/internals/components';
import { SITE_STORE, ONBOARD_STORE } from 'calypso/landing/stepper/stores';
import { useIsBigSkyEligible } from '../../../../hooks/use-is-site-big-sky-eligible';
import { useSiteData } from '../../../../hooks/use-site-data';
Expand Down Expand Up @@ -122,19 +122,14 @@ const LaunchBigSky: Step = function () {

function LaunchingBigSky() {
return (
<div className="processing-step__container">
<div className="processing-step">
<h1 className="processing-step__progress-step">
{ __( 'Launching the AI Website Builder' ) }
</h1>
{ ! isError && <ProgressBar className="processing-step__progress-bar" /> }
{ isError && (
<p className="processing-step__error">
{ __( 'Something unexpected happened. Please go back and try again.' ) }
</p>
) }
</div>
</div>
<>
<StepperLoader title={ __( 'Launching the AI Website Builder' ) } />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The loading bar will stay rendered when there is an error.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed!

{ isError && (
<p className="processing-step__error">
{ __( 'Something unexpected happened. Please go back and try again.' ) }
</p>
) }
</>
);
}

Expand Down
6 changes: 4 additions & 2 deletions client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@

// Launchpad - Processing Screens
.processing {
.processing-step__progress-bar {
.stepper-loader__progress-bar {
background-color: #fff;
}

Expand Down Expand Up @@ -340,8 +340,10 @@
.progress-bar {
display: none;
}
}

h1.processing-step__progress-step {
.stepper-loader {
h1.stepper-loader__title {
font-size: $font-title-medium;

@include break-medium {
Expand Down
Loading