From 1057278647050472e4184c4c08a1f023f7dc5187 Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Thu, 25 Aug 2022 00:26:02 -0400
Subject: [PATCH] Fixes spinners & centers loading message

---
 src/webviews/apps/plus/graph/GraphWrapper.tsx |  6 ++---
 src/webviews/apps/plus/graph/graph.scss       | 38 +++++++++++++--------------
 src/webviews/apps/shared/codicons.scss        | 35 ++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index 50ed5f8..9ab10f2 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -322,11 +322,11 @@ export function GraphWrapper({
 						</div>
 					</div>
 					{graphList.length > 0 && (
-						<span>
-							{graphList.length} commit{graphList.length ? 's' : ''}
+						<span className="actionbar__details">
+							{graphList.length} item{graphList.length ? 's' : ''}
 						</span>
 					)}
-					{isLoading && <span className="icon--loading" />}
+					{isLoading && <span className="actionbar__loading icon--loading icon-modifier--spin" />}
 				</div>
 				<div className="actionbar__group">
 					<a
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index 958b815..299038c 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -47,6 +47,15 @@ a {
 		}
 	}
 
+	&__details {}
+
+	&__loading {
+		position: relative;
+		top: 1px;
+		left: 0.5rem;
+		font-size: 1.2rem;
+	}
+
 	a {
 		color: inherit;
 	}
@@ -232,22 +241,6 @@ a {
 	}
 }
 
-.icon--loading {
-	&::before {
-		// codicon-loading
-		font-family: codicon;
-		content: '\eb19';
-	}
-	transform-origin: 50% 42%;
-	animation: spin .7s steps(30) infinite;
-
-	@keyframes spin {
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-}
-
 .icon--warning {
 	:before {
 		// codicon-vm
@@ -382,8 +375,15 @@ a {
 	& .resizable-handle.horizontal {
 		display: none;
 	}
-}
 
-.graph-container .node.stash-node .graph-icon {
-	transform: translateY(-2px);
+	& .node.stash-node .graph-icon {
+		transform: translateY(-2px);
+	}
+
+	& .graph-adjust-commit-count {
+		display: flex;
+		width: 100vw;
+		align-items: center;
+		justify-content: center;
+	}
 }
diff --git a/src/webviews/apps/shared/codicons.scss b/src/webviews/apps/shared/codicons.scss
index 0f2c12f..012d0a8 100644
--- a/src/webviews/apps/shared/codicons.scss
+++ b/src/webviews/apps/shared/codicons.scss
@@ -1,3 +1,38 @@
+@keyframes codicon-spin {
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.icon--sync.icon-modifier--spin,
+.icon--loading.icon-modifier--spin,
+.icon--gear.icon-modifier--spin {
+	/* Use steps to throttle FPS to reduce CPU usage */
+	animation: codicon-spin 1.5s steps(30) infinite;
+}
+
+.icon-modifier--disabled {
+	opacity: 0.5;
+}
+
+.icon-modifier--hidden {
+	opacity: 0;
+}
+
+.icon--loading {
+	/* Use steps to throttle FPS to reduce CPU usage */
+	animation: codicon-spin 1.5s steps(30) infinite;
+
+	/* custom speed & easing for loading icon */
+	animation-duration: 1s !important;
+	animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
+
+	&::before {
+		content: '\eb19';
+		font-family: codicon;
+	}
+}
+
 .icon--branch {
 	&::before {
 		content: '\ea68';