Show loading stack on hovering spinner

packages/ui/src/lib/backend/ipc.ts

@@ -33,7 +33,7 @@ export class UserError extends Error {
 }
 
 const loadingStore = writable(false);
-const loadStack: string[] = [];
+export const loadStack: string[] = [];
 export const isLoading = {
 	...loadingStore,
 	loadStack,
@@ -70,15 +70,16 @@ export async function invoke<T>(command: string, params: Record<string, unknown>
 			// 	return value;
 			// })
 			.then((value) => {
-				isLoading.pop();
 				return value;
 			})
 			.catch((reason) => {
-				isLoading.pop();
 				const userError = UserError.fromError(reason);
 				console.error(`ipc->${command}: ${JSON.stringify(params)}`, userError);
 				throw userError;
 			})
+			.finally(() => {
+				isLoading.pop();
+			})
 	);
 }
 

packages/ui/src/lib/icons/IconSpinner.svelte

@@ -9,6 +9,7 @@
 	height="24"
 	viewBox="0 0 24 24"
 	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
 >
 	<style>
 		.spinner_ajPY {

packages/ui/src/routes/[projectId]/Navigation.svelte

@@ -32,7 +32,7 @@
 	import * as events from '$lib/utils/events';
 	import { page } from '$app/stores';
 	import IconSpinner from '$lib/icons/IconSpinner.svelte';
-	import { isLoading } from '$lib/backend/ipc';
+	import { isLoading, loadStack } from '$lib/backend/ipc';
 
 	export let branchesWithContentStore: CustomStore<Branch[] | undefined>;
 	export let remoteBranchStore: CustomStore<RemoteBranch[] | undefined>;
@@ -274,7 +274,9 @@
 				</button>
 			</Tooltip>
 			{#if $isLoading}
-				<IconSpinner class="scale-75" />
+				<Tooltip label={loadStack.join('\n')}>
+					<IconSpinner class="scale-75" />
+				</Tooltip>
 			{/if}
 		</div>
 		<Link href="/user/">