From deba6e62554c80e6b83cfdceee9ed1d80f52e511 Mon Sep 17 00:00:00 2001
From: Miggy Eusebio <miggy.eusebio@gitkraken.com>
Date: Wed, 24 Aug 2022 11:24:29 -0700
Subject: [PATCH] Add loading spinner to graph status bar

---
 src/webviews/apps/plus/graph/GraphWrapper.tsx | 3 +++
 src/webviews/apps/plus/graph/graph.scss       | 7 ++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index 46d5f3f..c4b5ba8 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -320,6 +320,9 @@ export function GraphWrapper({
 							{graphList.length} commit{graphList.length ? 's' : ''}
 						</span>
 					)}
+					{isLoading && (
+						<span className={'icon--loading'}/>
+					)}
 				</div>
 				<div className="actionbar__group">
 					<span className="badge">Preview</span>
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index d59acaf..1c032f4 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -228,13 +228,10 @@ a {
 		font-family: codicon;
 		content: '\eb19';
 	}
-	animation: spin 1s infinite linear;
-	animation-delay: 0.2s;
+	transform-origin: 50% 42%;
+	animation: spin .7s steps(30) infinite;
 
 	@keyframes spin {
-		0% {
-			transform: rotate(0deg);
-		}
 		100% {
 			transform: rotate(360deg);
 		}