The "Cancel Coding Agent" button now shows a loading spinner during the cancellation process to provide clear visual feedback to users.

Problem

Users reported that when clicking "Cancel Coding Agent", the button would become disabled for ~10 seconds with no visual indication that the cancellation was still in progress. This left users uncertain whether the action was working or if the button was stuck.

Solution

Added a spinning loading icon that appears inline with the button text when the cancellation is in progress:

• Before: Button shows "Cancel Coding Agent" and becomes disabled (no visual feedback)
• After: Button shows "🔄 Cancel Coding Agent" with animated spinner while disabled

Implementation Details

• Leverages existing isBusy state management in CancelCodingAgentButton
• Uses the existing loadingIcon component with CSS animations already present in the codebase
• Minimal changes to ContextDropdown interface to support React nodes in button labels
• Maintains backward compatibility - all existing dropdown buttons continue to work unchanged

Technical Changes

1. Updated ContextDropdownProps.defaultOptionLabel to accept string | React.ReactNode
2. Modified ContextDropdown to safely handle React nodes in the title attribute
3. Enhanced CancelCodingAgentButton to conditionally show spinner when isBusy is true

The implementation provides immediate visual feedback that the cancellation is actively processing, improving the user experience during the 10-second operation.

Fixes #7451.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.