From 8a86d65c6fa1ded142efbc8eeafe315013af8820 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 29 Dec 2023 15:06:18 +0100
Subject: [PATCH] fix: update loading spinner behavior and style

- Fixed the loading spinner behavior.
- Updated the loading spinner style to use a circle path instead of a spinning animation for better visual effect.
- Adjusted the size and speed of the loading spinner animation.
---
 gitbutler-ui/src/lib/components/Button.svelte |  4 +--
 .../src/lib/components/DropDown.svelte        |  3 +-
 gitbutler-ui/src/lib/icons/Icon.svelte        | 32 ++++++++++++++++---
 .../[projectId]/navigation/Footer.svelte      |  5 ++-
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/gitbutler-ui/src/lib/components/Button.svelte b/gitbutler-ui/src/lib/components/Button.svelte
index 6db2d4d32..0c230ce3b 100644
--- a/gitbutler-ui/src/lib/components/Button.svelte
+++ b/gitbutler-ui/src/lib/components/Button.svelte
@@ -49,8 +49,8 @@
 			<slot />
 		</span>
 	{/if}
-	{#if icon}
-		<Icon name={loading ? 'spinner' : icon} />
+	{#if icon && !loading}
+		<Icon name={icon} />
 	{:else if loading}
 		<Icon name="spinner" />
 	{/if}
diff --git a/gitbutler-ui/src/lib/components/DropDown.svelte b/gitbutler-ui/src/lib/components/DropDown.svelte
index 762a16bed..7d23b54c6 100644
--- a/gitbutler-ui/src/lib/components/DropDown.svelte
+++ b/gitbutler-ui/src/lib/components/DropDown.svelte
@@ -48,7 +48,8 @@
 			bind:element={iconElt}
 			{color}
 			{kind}
-			icon={loading ? 'spinner' : visible ? 'chevron-top' : 'chevron-down'}
+			icon={visible ? 'chevron-top' : 'chevron-down'}
+			{loading}
 			disabled={disabled || loading}
 			on:click={() => (visible = !visible)}
 		/>
diff --git a/gitbutler-ui/src/lib/icons/Icon.svelte b/gitbutler-ui/src/lib/icons/Icon.svelte
index f51dca7db..e02a4db5e 100644
--- a/gitbutler-ui/src/lib/icons/Icon.svelte
+++ b/gitbutler-ui/src/lib/icons/Icon.svelte
@@ -8,13 +8,14 @@
 	export let name: keyof typeof iconsJson;
 	export let color: IconColor = undefined;
 	export let opacity: string | undefined = undefined;
+	export let spinnerRadius: number | undefined = 5;
 </script>
 
 <svg
 	class="icon-wrapper"
-	class:spinning={name == 'spinner'}
 	viewBox="0 0 16 16"
 	fill-rule="evenodd"
+	class:spinner={name == 'spinner'}
 	class:success={color == 'success'}
 	class:error={color == 'error'}
 	class:pop={color == 'pop'}
@@ -22,7 +23,11 @@
 	class:default={!color}
 	style:opacity
 >
-	<path fill="currentColor" d={iconsJson[name]}></path>
+	{#if name == 'spinner'}
+		<circle class="spinner-path" cx="8" cy="8" r={spinnerRadius} fill="none" />
+	{:else}
+		<path fill="currentColor" d={iconsJson[name]} />
+	{/if}
 </svg>
 
 <style lang="postcss">
@@ -47,13 +52,32 @@
 		color: var(--clr-theme-scale-warn-60);
 	}
 
-	.spinning {
+	.spinner {
 		transform-origin: center;
-		animation: spinning 0.75s infinite linear;
+		animation: spinning 1s infinite linear;
 	}
 	@keyframes spinning {
 		100% {
 			transform: rotate(360deg);
 		}
 	}
+	.spinner-path {
+		stroke-width: calc(var(--space-2) / 1.3);
+		stroke: currentColor;
+		animation: spinning-path 1.5s infinite ease-in-out;
+	}
+	@keyframes spinning-path {
+		0% {
+			stroke-dasharray: 1, 200;
+			stroke-dashoffset: 0;
+		}
+		50% {
+			stroke-dasharray: 60, 200;
+			stroke-dashoffset: -12;
+		}
+		100% {
+			stroke-dasharray: 60, 200;
+			stroke-dashoffset: -34;
+		}
+	}
 </style>
diff --git a/gitbutler-ui/src/routes/[projectId]/navigation/Footer.svelte b/gitbutler-ui/src/routes/[projectId]/navigation/Footer.svelte
index 2f2cc7b2a..dcdc7bb56 100644
--- a/gitbutler-ui/src/routes/[projectId]/navigation/Footer.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/navigation/Footer.svelte
@@ -49,13 +49,12 @@
 		padding: var(--space-12);
 		border-top: 1px solid var(--clr-theme-container-outline-light);
 	}
-
 	.left-btns {
 		display: flex;
 		align-items: center;
 	}
 	.loading-status {
-		margin-left: 0.5rem;
-		margin-right: 0.5rem;
+		margin-left: var(--space-12);
+		margin-right: var(--space-12);
 	}
 </style>