Add loading spinner to Cancel Coding Agent button (#7466)

* Initial plan

* Initial plan for adding loading spinner to Cancel Coding Agent button

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Add loading spinner to Cancel Coding Agent button

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Fix alignment and shifting

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

src/@types/vscode.proposed.chatSessionsProvider.d.ts

@@ -8,11 +8,6 @@ declare module 'vscode' {
 	 * Provides a list of information about chat sessions.
 	 */
 	export interface ChatSessionItemProvider {
-		/**
-		 * Label of the extension that registers the provider.
-		 */
-		readonly label: string; // TODO: move to contribution or registration
-
 		/**
 		 * Event that the provider can fire to signal that chat sessions have changed.
 		 */

webviews/activityBarView/index.css

@@ -184,9 +184,5 @@ button .icon svg {
 }
 
 button.split-left {
-	border-radius: 2px 0 0 2px;
-	flex-grow: 1;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+	display: block;
 }

webviews/common/common.css

@@ -359,6 +359,7 @@ button.split-left {
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	display: flex;
 }
 
 .split {

webviews/components/contextDropdown.tsx

@@ -6,17 +6,17 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { chevronDownIcon } from './icon';
 
-interface ContextDropdownProps {
-	optionsContext: () => string;
-	defaultOptionLabel: () => string;
-	defaultOptionValue: () => string;
-	defaultAction: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-	allOptions?: () => { label: string; value: string; action: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void }[];
-	optionsTitle: string;
-	disabled?: boolean;
-	hasSingleAction?: boolean;
-	spreadable: boolean;
-	isSecondary?: boolean;
+interface ContextDropdownProps {
+	optionsContext: () => string;
+	defaultOptionLabel: () => string | React.ReactNode;
+	defaultOptionValue: () => string;
+	defaultAction: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+	allOptions?: () => { label: string; value: string; action: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void }[];
+	optionsTitle: string;
+	disabled?: boolean;
+	hasSingleAction?: boolean;
+	spreadable: boolean;
+	isSecondary?: boolean;
 }
 
 function useWindowSize() {
@@ -59,10 +59,10 @@ export const ContextDropdown = ({ optionsContext, defaultOptionLabel, defaultOpt
 			return <button className='inlined-dropdown' key={value} title={label} disabled={disabled} onClick={action} value={value}>{label}</button>;
 		})
 			:
-			<div className='primary-split-button'>
-				<button className={`split-left${isSecondary ? ' secondary' : ''}`} disabled={disabled} onClick={defaultAction} value={defaultOptionValue()}
-					title={defaultOptionLabel()}>
-					{defaultOptionLabel()}
+			<div className='primary-split-button'>
+				<button className={`split-left${isSecondary ? ' secondary' : ''}`} disabled={disabled} onClick={defaultAction} value={defaultOptionValue()}
+					title={typeof defaultOptionLabel() === 'string' ? defaultOptionLabel() as string : optionsTitle}>
+					{defaultOptionLabel()}
 				</button>
 				{hasSingleAction ? null :
 					<div className={`split${isSecondary ? ' secondary' : ''}${disabled ? ' disabled' : ''}`}><div className={`separator${disabled ? ' disabled' : ''}`}></div></div>

webviews/components/header.tsx

@@ -192,7 +192,12 @@ function CancelCodingAgentButton({ canEdit, codingAgentEvent }: { canEdit: boole
 	return <ContextDropdown
 		optionsContext={() => JSON.stringify(context)}
 		defaultAction={actions[0].action}
-		defaultOptionLabel={() => actions[0].label}
+		defaultOptionLabel={() => isBusy ? (
+			<>
+				<span className='loading-button'>{loadingIcon}</span>
+				{actions[0].label}
+			</>
+		) : actions[0].label}
 		defaultOptionValue={() => actions[0].value}
 		allOptions={() => {
 			return actions;

webviews/editorWebview/index.css

@@ -66,6 +66,12 @@ textarea:focus,
 	transform: translate(-50%, -50%);
 }
 
+.loading-button {
+	display: inline-flex;
+	align-items: center;
+	margin-right: 4px;
+}
+
 .comment-body li div {
 	display: inline;
 }