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 6240411 vs trunk

site-editor

Metric	trunk	6240411	Diff	Change
load	12316.00 ms	10420.00 ms	-1896.00 ms	🟢 -15.4%

site-startup

Metric	trunk	6240411	Diff	Change
siteCreation	15111.00 ms	14994.00 ms	-117.00 ms	🟢 -0.8%
siteStartup	4929.00 ms	5917.00 ms	+988.00 ms	🔴 20.0%

---

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: