Show loading indicator when clicking on commits in timeline (#7465)

* Initial plan

* Initial setup - Planning implementation of commit loading indicator

Co-authored-by: alexr00 <[email protected]>

* Implement loading indicator for commit clicks in timeline

Co-authored-by: alexr00 <[email protected]>

* 💄

* Fix loading indicator layout issues

Co-authored-by: alexr00 <[email protected]>

* Fix wrapping

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: alexr00 <[email protected]>

Author: Copilot

src/github/pullRequestOverview.ts

@@ -538,6 +538,7 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 		try {
 			const { commitSha } = message.args;
 			await PullRequestModel.openCommitChanges(this._item.githubRepository, commitSha);
+			this._replyMessage(message, {});
 		} catch (error) {
 			Logger.error(`Failed to open commit changes: ${formatError(error)}`, PullRequestOverviewPanel.ID);
 			vscode.window.showErrorMessage(vscode.l10n.t('Failed to open commit changes: {0}', formatError(error)));

src/github/views.ts

@@ -105,6 +105,7 @@ export interface PullRequest extends Issue {
 	lastReviewType?: ReviewType;
 	revertable?: boolean;
 	busy?: boolean;
+	loadingCommit?: string;
 }
 
 export interface ProjectItemsReply {

webviews/common/common.css

@@ -459,6 +459,21 @@ button.inlined-dropdown {
 	margin-left: 5px;
 }
 
+.commit-spinner-inline {
+	margin-left: 8px;
+	display: inline-flex;
+	align-items: center;
+	vertical-align: middle;
+	grid-column: none;
+}
+
+.commit-spinner-before {
+	margin-right: 6px;
+	display: inline-flex;
+	align-items: center;
+	vertical-align: middle;
+}
+
 .loading {
 	animation: spinner-rotate 1s linear infinite;
 }

webviews/common/context.tsx

@@ -293,9 +293,14 @@ export class PRContext {
 
 	public openSessionLog = (link: SessionLinkInfo) => this.postMessage({ command: 'pr.open-session-log', args: { link } });
 
-	public openCommitChanges = (commitSha: string) => {
-		const args: OpenCommitChangesArgs = { commitSha };
-		return this.postMessage({ command: 'pr.openCommitChanges', args });
+		public openCommitChanges = async (commitSha: string) => {
+		this.updatePR({ loadingCommit: commitSha });
+		try {
+			const args: OpenCommitChangesArgs = { commitSha };
+			await this.postMessage({ command: 'pr.openCommitChanges', args });
+		} finally {
+			this.updatePR({ loadingCommit: undefined });
+		}
 	};
 
 	setPR = (pr: PullRequest | undefined) => {

webviews/components/timeline.tsx

@@ -28,7 +28,7 @@ import { ReviewType } from '../../src/github/views';
 import PullRequestContext from '../common/context';
 import { CommentView } from './comment';
 import Diff from './diff';
-import { commitIcon, errorIcon, mergeIcon, plusIcon, tasklistIcon, threeBars } from './icon';
+import { commitIcon, errorIcon, loadingIcon, mergeIcon, plusIcon, tasklistIcon, threeBars } from './icon';
 import { nbsp } from './space';
 import { Timestamp } from './timestamp';
 import { AuthorLink, Avatar } from './user';
@@ -107,12 +107,18 @@ export default Timeline;
 
 const CommitEventView = (event: CommitEvent) => {
 	const context = useContext(PullRequestContext);
+	const [clickedElement, setClickedElement] = useState<'title' | 'sha' | undefined>(undefined);
 
-	const handleCommitClick = (e: React.MouseEvent) => {
+	const handleCommitClick = (e: React.MouseEvent, elementType: 'title' | 'sha') => {
 		e.preventDefault();
-		context.openCommitChanges(event.sha);
+		setClickedElement(elementType);
+		context.openCommitChanges(event.sha).finally(() => {
+			setClickedElement(undefined);
+		});
 	};
 
+	const isLoading = context.pr?.loadingCommit === event.sha;
+
 	return (
 		<div className="comment-container commit">
 			<div className="commit-message">
@@ -124,19 +130,21 @@ const CommitEventView = (event: CommitEvent) => {
 				<div className="message-container">
 					<a
 						className="message"
-						onClick={handleCommitClick}
+						onClick={(e) => handleCommitClick(e, 'title')}
 						title={event.htmlUrl}
 					>
 						{event.message.substr(0, event.message.indexOf('\n') > -1 ? event.message.indexOf('\n') : event.message.length)}
 					</a>
+					{isLoading && clickedElement === 'title' && <span className="commit-spinner-inline">{loadingIcon}</span>}
 				</div>
 			</div>
 			<div className="timeline-detail">
 				<a
 					className="sha"
-					onClick={handleCommitClick}
+					onClick={(e) => handleCommitClick(e, 'sha')}
 					title={event.htmlUrl}
 				>
+					{isLoading && clickedElement === 'sha' && <span className="commit-spinner-before">{loadingIcon}</span>}
 					{event.sha.slice(0, 7)}
 				</a>
 				<Timestamp date={event.committedDate} />