Sync Pull: Update the progress from percentage from the backup response #1278

epeicher · 2025-04-25T17:17:42Z

Related issues

Proposed Changes

Use the percentage field from the backup status endpoint
Increase the progress of the backup status proportionally to the percentage returned in previous step.
Use the importState messages when available to provide greater detail of the Importing Backup step

Testing Instructions

Apply this changes and run npm start
Go to the Sync tab and connect with a non-trivial site, for example a WooCommerce site with multiple products. You can find an example of a non-trivial site here 37a5a-pb that you can Import if required
Additionally, you can apply the following patch for testing to see the numeric progress of the Download step

diff --git i/src/components/sync-connected-sites.tsx w/src/components/sync-connected-sites.tsx
index c4bb29b1..a94b7c0c 100644
--- i/src/components/sync-connected-sites.tsx
+++ w/src/components/sync-connected-sites.tsx
@@ -248,6 +248,7 @@ const SyncConnectedSitesList = ( { selectedSite }: SyncConnectedSitesListProps )
 											sitePullState.status.message }
 									</div>
 									<ProgressBar value={ sitePullState.status.progress } maxValue={ 100 } />
+									<p>{ sitePullState.status.progress }</p>
 								</div>
 							) }
 							{ isPullError && (

Run a Pull and check the progress

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

Adding the Importing states will provide more context to the Pull whole action

ivan-ottinger

The proposed changes look good to me and work correctly in my tests. The progress is smoother and displays relevant status messages. Great work, Roberto!

I have left a couple smaller comments below.

It took me a bit longer to review this one as I haven't touched this part of the codebase before. Because of that, I think it makes sense if more eyes take a look at the proposed changes in case I missed something. 🙂

ivan-ottinger · 2025-04-29T09:31:19Z

src/hooks/sync-sites/use-sync-pull.ts

+type SyncBackupResponse = {
+	status: 'in-progress' | 'finished' | 'failed';
+	download_url: string;
+	percent: number;
+};
+


Thank you for extracting out this type. It is more readable to me now.

ivan-ottinger · 2025-04-29T09:45:14Z

src/hooks/sync-sites/use-sync-pull.ts

+	if ( response.status === 'in-progress' ) {
+		newProgressInfo = pullStatesProgressInfo[ frontendStatus ];
+		newProgressInfo.progress =
+			IN_PROGRESS_INITIAL_VALUE + IN_PROGRESS_TO_DOWNLOADING_STEP * ( response.percent / 100 );


I like this spread of the percentage / progress. Nice!

ivan-ottinger · 2025-04-29T10:03:29Z

src/components/sync-connected-sites.tsx

+										{ importState[ connectedSite.localSiteId ]?.statusMessage ||
+											sitePullState.status.message }


This might be a bit subjective, but maybe we could consider extracting out this logic for better readability (e.g. into a separate const statusMessage).

That makes total sense to me, updated as part of 6afe9c9

sejas

Nice!, Great idea using the import states to give more information to the user.
In the future we could even improve when importing certain tables in both features, pull and import.

One thing I would like to improve is displaying "Import completed" for a few seconds before showing "Pull complete." Can we omit or replace that message? Perhaps something like: "Applying final details…", "Finishing the import…" or "Starting the site…" could work.

We should also test it in other languages, such as Ukrainian, because the change in the length of the new strings affects the size of the progress bar.

Video BEFORE

before-pressable-pull.mp4

Video AFTER

after-pressable-pull.mp4

epeicher · 2025-04-30T17:20:31Z

Thanks @sejas, for the review and the suggestions. I have created a PoC of the Import step that updates the bar progress based on the Import inner steps. Also, I have replaced the Importing completed step by Applying final details as ChatGPT liked that the most 😛 , but happy to use another wording.

I have used an external function for that, but I would like to get some feedback. Other options that I would like to try are:

Move that function to a external utils file or similar
Use a custom hook where I can use the useI18n
Do not overcomplicate the progress with another formula, so discard the progress refinement

Commit here e1c64bc

Please let me know your view on this.

sejas

Great work! It runs super smoothly.
Let's add ellipsis to the Applying final details …

pull-with-import-states.mp4

sejas · 2025-05-01T07:19:33Z

src/components/sync-connected-sites.tsx

+	}
+	if ( importState ) {
+		if ( importState.progress === 100 ) {
+			return { message: __( 'Applying final details' ), progress: 99 };


Let's also add ellipsis to this sentence:

Suggested change

return { message: __( 'Applying final details' ), progress: 99 };

return { message: __( 'Applying final details…' ), progress: 99 };

…dio-sync-add-percentage-based-or-more-states-into-account

epeicher added 2 commits April 25, 2025 19:15

Sync Pull: Update the progress from percentage from the backup response

880876f

Fix the in-progress percentage and add Importing states

8eb4359

Adding the Importing states will provide more context to the Pull whole action

ivan-ottinger reviewed Apr 29, 2025

View reviewed changes

Extract status message logic to constant for better readability

6afe9c9

epeicher marked this pull request as ready for review April 29, 2025 13:37

epeicher requested review from a team and sejas April 29, 2025 13:37

sejas reviewed Apr 29, 2025

View reviewed changes

Refine progess when importing, remove Importing completed from Pull

e1c64bc

sejas approved these changes May 1, 2025

View reviewed changes

sejas added 2 commits May 2, 2025 17:41

Merge branch 'trunk' of github.com:Automattic/studio into stu-167-stu…

bf8227c

…dio-sync-add-percentage-based-or-more-states-into-account

Add ellipsis to final details

daa5f73

sejas enabled auto-merge (squash) May 2, 2025 17:28

sejas merged commit 21c8034 into trunk May 2, 2025
4 of 8 checks passed

sejas deleted the stu-167-studio-sync-add-percentage-based-or-more-states-into-account branch May 2, 2025 17:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Sync Pull: Update the progress from percentage from the backup response #1278

Sync Pull: Update the progress from percentage from the backup response #1278

Uh oh!

epeicher commented Apr 25, 2025 •

edited

Loading

Uh oh!

ivan-ottinger left a comment

Uh oh!

ivan-ottinger Apr 29, 2025

Uh oh!

ivan-ottinger Apr 29, 2025

Uh oh!

ivan-ottinger Apr 29, 2025

Uh oh!

epeicher Apr 29, 2025

Uh oh!

sejas left a comment •

edited

Loading

Uh oh!

epeicher commented Apr 30, 2025

Uh oh!

sejas left a comment

Uh oh!

sejas May 1, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		{ importState[ connectedSite.localSiteId ]?.statusMessage \|\|
		sitePullState.status.message }

	return { message: __( 'Applying final details' ), progress: 99 };
	return { message: __( 'Applying final details…' ), progress: 99 };

Sync Pull: Update the progress from percentage from the backup response #1278

Sync Pull: Update the progress from percentage from the backup response #1278

Uh oh!

Conversation

epeicher commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

ivan-ottinger left a comment

Choose a reason for hiding this comment

Uh oh!

ivan-ottinger Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

ivan-ottinger Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

ivan-ottinger Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

epeicher Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

sejas left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

epeicher commented Apr 30, 2025

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

sejas May 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

epeicher commented Apr 25, 2025 •

edited

Loading

sejas left a comment •

edited

Loading