A4A: Add loading indicator when removing site.

[jkguidaven]

The current 'Remove site' experience is somewhat broken, lacking any indication that the dashboard is processing the request. This PR introduces an isBusy state on the button to show that the site is loading.

Screen.Recording.2025-05-09.at.7.24.59.PM.mov

Closes https://linear.app/a8c/issue/A4A-793/show-a-loading-indicator-when-the-remove-site-request-is-in-progress

Proposed Changes

• Pass the isPending state to the button to display the busy indicator. The isPending state should not depend on the mutation state; instead, it uses a custom state due to a one-second delay for refetching sites after a site has been removed.
• Fix styling so there is proper spacing around the action and message elements.
• Extra: I refactored the component for better readability, as the double-nested callback can be confusing. This also resolves a linting problem related to the component's display name.

Why are these changes being made?

• This improves user experience

Testing Instructions

• Use the A4A live link and navigate to /sites.
• Remove a site.
• Confirm that the modal shows a busy button when the request is being sent.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-143575

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-143575&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-143575&env=a8c-for-agencies

[Copilot]

Pull Request Overview

This PR improves the user experience when removing a site by adding a loading indicator and refactoring the modal component for better readability. Key changes include:

• Introducing the isPending state to manage the busy indicator on the remove site button.
• Refactoring the component structure to separate type definitions and the main component.
• Ensuring the busy state is updated via both the onSuccess and onSettled callbacks.

[Copilot]

The isPending state is set to false in both the onSuccess callback (inside the setTimeout) and the onSettled callback; consider centralizing state cleanup to avoid redundancy.

Suggested change

	setIsPending( false );
	} );
	}, 1000 );
	},
	onSettled: () => {
	setIsPending( false );
	} );
	}, 1000 );
	},
	onSettled: () => {
	// Ensure state cleanup after the delay.
	setTimeout( () => {
	setIsPending( false );
	}, 1000 );

[jkguidaven]

We can't do this because a refetch adds another delay on top of the 1 second.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/a4a/scrolling-bug-on-hosting-page on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~102 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
a8c-for-agencies-sites       +277 B  (+0.0%)     +102 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.