Push: Read and update the progress from the sync endpoint

[epeicher]

Related issues

• Relates STU-399

Proposed Changes

• Calls the GET /sync/import using the importId to obtain the progress
• Use the progress from the /sync/import endpoint to update the progress in the importing state
• Splits the progress of the importing state between backup and import
• The backup step will take 10 steps (from 100) in the progress bar, from 60 to 70, and it will be increased by the backup_progress returned by the endpoint.
• The import step will take 30 steps in the progress bar, from 70 to 100, and it will be increased by the import_progress returned by the endpoint.

This is a video with the numeric progress added for debugging purposes:

CleanShot.2025-05-15.at.16.44.57.mp4

Testing Instructions

• Apply the changes in 182803-ghe-Automattic/wpcom and sandbox your environment
• Apply changes in this branch and run npm start
• Create a site with studio or use an existing one, and connect it to a site in WordPress.com
• Go to the Sync tab and run a Push
• Check the progress moves in the Applying changes… after some seconds
• Additionally, you can apply this diff for debugging purposes to see a numerical progress

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 && (

Regression testing

• Apply the changes in 182803-ghe-Automattic/wpcom and sandbox your environment
• Open a production version of Studio
• Create a site with studio or use an existing one, and connect it to a site in WordPress.com
• Go to the Sync tab and run a Push
• Check there are no unexpected errors

Pre-merge Checklist

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

[sejas]

I tested it with the backend API PR and it worked great. Here is a short video displaying the progress in number.

applying-changes-progress.mp4

Let's not merge this PR until the backend PR is merged.

[sejas]

I see this status is new.

[epeicher]

Yes, I added archive_import_finished to handle it here, but as @wojtekn asks here, we can keep the progress under 100 % during that status and the finished one. What do you think?

[wojtekn]

Is it okay that we display '100%' and 'Applying changes...' for a while?

[epeicher]

Is it okay that we display '100%' and 'Applying changes...' for a while?

For the Pull process, we added one step Applying final details… for that. We can do a similar thing here, but in principle that 100% should not take more than some seconds.

[sejas]

@epeicher , great work!! 🙌
Thanks for iterating on this, I tested it with the endpoint and it works great.

I would like to divide the Applying changes… step by adding two more messages?

1. I would like to add a state saying Keeping your site safe… when initial_backup_started.
2. Let's add a final message when archive_import_finished saying something like: Last touches… and return progress of 99.

The last state will fix the problem mentioned by Wojtek where the bar is kept in 100% for a few seconds.

push-with-progress.mp4

[epeicher]

Thanks @sejas for all your suggestions! I think I've applied most of them, and this is ready for another review. I like that we are leaving the code in a much better position. And I also love the additional steps that will provide more feedback to the user.

[sejas]

@epeicher , should we update the base of this PR to point to trunk?

[epeicher]

@epeicher , should we update the base of this PR to point to trunk?

Yep, I had stacked these changes on top of #1380 to avoid distracting this with unrelated changes. Now that I have merged the base branch, this has been rebased to trunk and there should not be any additional changes

[sejas]

The new messages set better expectations for the user. Thanks for adding them!

Would be possible to add the messages inside the pushStatesProgressInfo object?
I was thinking maybe instead of having different variables like archiveInitialValue, we could use the object pushStatesProgressInfo.archiving.progress + STEP*X, pushStatesProgressInfo.importing.progress

Around the minute 1:30 , I see the progress goes backwards a bit.

studio-push-progress-more-messages.mp4

[epeicher]

Would be possible to add the messages inside the pushStatesProgressInfo object?

Sure, I thought about that but discarded initially because I didn't wanted to affect other areas and I interepreted them as substeps of the pushStatesProgressInfo object. But I totally see the reasoning of using that object as the source of truth of the states and avoiding the substeps approach. I will work on that.

I was thinking maybe instead of having different variables like archiveInitialValue, we could use the object pushStatesProgressInfo.archiving.progress + STEP*X, pushStatesProgressInfo.importing.progress

I will iterate over this, maybe I will ping you to check before committing any changes.

Around the minute 1:30 , I see the progress goes backwards a bit.

I see it in the video, thanks for that. I will have a look at it.

[sejas]

Sure! happy to pair or give early feedback.
Maybe the issue that the progress goes backwards is solved once we move the "base" progress to the object.

[epeicher]

@sejas a quick question on naming 😅 , what do you think about naming the two new steps:

• creatingRemoteBackup
• applyingChanges

They will be added to PushStateProgressInfo instead of the current importing step

Happy to update them to other suggestions

[sejas]

They look great! I think applying changes is better than importing 👍.
Could we also add the last step of last touches?
For that step the label could say: Almost there… and maybe the key… finishing or waitingToFinish …
Naming variables is hard! xD

[epeicher]

Could we also add the last step of last touches?

You read my mind! While changing the code I was just about to ask you about it 😄 . I think the approach of centralizing all the states in pushStatesProgressInfo is the proper one

[epeicher]

@sejas, I have applied your suggestions about the additional steps and the progress changes in aa2a0b3. I think is better than using the constants, we can apply the same approach to the Pull process (as part of a follow-up 😄).

I plan to add some tests that check at least that the ProgressBar appears when in progress, what do you think?

Regarding the progress moving backwards, I have not been able to reproduce the exact issue, but one hypothesis could be that the backend reports a decreasing percentage, in that case, the progress would represent that. If you are able to reproduce that consistently, could you please check the /sync/import endpoint call and check the backup_progress field in the Network tab?

Additionally, we can add a guard here that ensures that the progress only progresses forward but I would only add that if we confirm that the backend reports incorrect percentages.

[sejas]

I tested it by pushing a Pressable site and the progress bar works great! No more doubts that the push is progressing and not stuck at all. Great work!

studio-push-progress-kiss-chef.mp4

[sejas]

😚 👌

[sejas]

For comparison, here is how the progress bar was before:

push-progress-before.mp4