Studio: Ability to cancel the push and pull

[bcotrim]

Related issues

• Fixes STU-156

Proposed Changes

• Add cancel button UI to sync operations
• Push can be canceled during backup creation
• Pull can be cancelled while remote backup creation and download

Cancel button	Cancelled

Testing Instructions

• Start a push/pull operation from Studio to WordPress.com
• During the sync progress, click the X icon to the right of the progress bar
• Verify the operation cancels
• Test cancellation at different stages of the sync process to ensure it works during safe stages
• Confirm cancellation is disabled after safe stages

Pre-merge Checklist

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

[github-actions]

📊 Performance Test Results

Comparing 4b09545 vs trunk

site-editor

Metric	trunk	4b09545	Diff	Change
load	10605.00 ms	9370.00 ms	-1235.00 ms	🟢 -11.6%

site-startup

Metric	trunk	4b09545	Diff	Change
siteCreation	14008.00 ms	12974.00 ms	-1034.00 ms	🟢 -7.4%
siteStartup	3957.00 ms	3970.00 ms	+13.00 ms	🔴 0.3%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

[katinthehatsite]

Thanks for adding this PR, it is nice to have an ability to cancel sync operations ❤️

I have noticed two issue while testing:

• If you cancel push first and then start pull and cancel it as well, you end up with a weird state:

I think we need to update it to only include that text in relation to the exact operation that was cancelled.

• Cancel pull was slightly overlapping the side of the screen for me:

[katinthehatsite]

Thanks for addressing previous feedback 👍

The Cancel pull looks good to me now 👍

I also did not spot anymore the issue with cancelling push and pull UI. Just left a couple of minor comments.