🐛 spinning sync icon

fixes #23975

extensions/git/src/statusbar.ts

@@ -126,6 +126,7 @@ class SyncStatusBar {
 		}
 
 		if (this.state.isSyncRunning) {
+			icon = '$(sync~spin)';
 			text = '';
 			command = '';
 			tooltip = localize('syncing changes', "Synchronizing changes...");

src/vs/base/browser/ui/octiconLabel/octiconLabel.ts

@@ -4,13 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-
 import 'vs/css!./octicons/octicons';
+import 'vs/css!./octicons/octicons-animations';
 import { escape } from 'vs/base/common/strings';
 
 export function expand(text: string): string {
-	return text.replace(/\$\(([^)]+)\)/g, (match, g1) => {
-		return `<span class="octicon octicon-${g1}"></span>`;
+	return text.replace(/\$\(((.+?)(~(.*?))?)\)/g, (match, g1, name, g3, animation) => {
+		return `<span class="octicon octicon-${name} ${animation ? `octicon-animation-${animation}` : ''}"></span>`;
 	});
 }
 

src/vs/base/browser/ui/octiconLabel/octicons/octicons-animations.css

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+@keyframes octicon-spin {
+	100% {
+		transform:rotate(360deg);
+	}
+}
+
+.octicon-animation-spin {
+	animation: octicon-spin 2s linear infinite;
+}