visual hints when buttons are loading goto

frontend/src/lib/components/common/button/Button.svelte

@@ -4,6 +4,7 @@
 	import Icon from 'svelte-awesome'
 	import { ButtonType } from './model'
 	import { goto } from '$app/navigation'
+	import { faArrowsRotate, faSpinner } from '@fortawesome/free-solid-svg-icons'
 
 	export let size: ButtonType.Size = 'md'
 	export let spacingSize: ButtonType.Size = size
@@ -20,6 +21,8 @@
 	export let id: string = ''
 	export let nonCaptureEvent: boolean = false
 
+	let loading = false
+
 	const dispatch = createEventDispatcher()
 	// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 	const colorVariants: Record<ButtonType.Color, Record<ButtonType.Variant, string>> = {
@@ -70,7 +73,7 @@
 		tabindex: disabled ? -1 : 0
 	}
 
-	function onClick(event: MouseEvent) {
+	async function onClick(event: MouseEvent) {
 		if (!nonCaptureEvent) {
 			event.preventDefault()
 			dispatch('click', event)
@@ -78,7 +81,9 @@
 				if (href.startsWith('http') || target == '_blank') {
 					window.open(href, target)
 				} else {
-					goto(href)
+					loading = true
+					await goto(href)
+					loading = false
 				}
 			}
 		}
@@ -100,9 +105,16 @@
 	on:blur
 	{...buttonProps}
 >
-	{#if startIcon}
+	{#if loading}
+		<Icon
+			data={faSpinner}
+			class={`animate-spin ${startIconClass}`}
+			scale={ButtonType.IconScale[size]}
+		/>
+	{:else if startIcon}
 		<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
 	{/if}
+
 	{#if !iconOnly}
 		<slot />
 	{/if}

frontend/src/lib/components/landing/FlowGettingStarted.svelte

@@ -18,13 +18,7 @@
 		the Hub!
 	</div>
 	<div class="flex flex-row flex-wrap gap-y-2">
-		<Button
-			on:click={() => goto('flows/add')}
-			color="dark"
-			size="xs"
-			btnClasses="mr-2"
-			startIcon={{ icon: faPlus }}
-		>
+		<Button href="/flows/add" color="dark" size="xs" btnClasses="mr-2" startIcon={{ icon: faPlus }}>
 			Create flow
 		</Button>
 		<Button

frontend/src/lib/components/landing/FlowLandingBox.svelte

@@ -20,7 +20,7 @@
 
 	<div class="flex flex-row-reverse gap-x-2">
 		<Button
-			on:click={() => goto(`/flows/edit/${flow.path}`)}
+			href="/flows/edit/{flow.path}"
 			color="dark"
 			size="xs"
 			variant="border"
@@ -30,7 +30,7 @@
 		</Button>
 
 		<Button
-			on:click={() => goto(`/flows/run/${flow.path}`)}
+			href="/flows/run/{flow.path}"
 			color="dark"
 			size="xs"
 			variant="border"

frontend/src/lib/components/landing/RessourceGettingStarted.svelte

@@ -15,7 +15,7 @@
 	<div class="mt-2 mb-4 text-sm text-gray-700 dark:text-gray-300">
 		Connect to apps like Slack, Google Drive or Airtable using OAuth.
 	</div>
-	<Button on:click={() => goto('resources')} color="dark" startIcon={{ icon: faLink }} size="xs">
+	<Button href="/resources" color="dark" startIcon={{ icon: faLink }} size="xs">
 		Connect an API
 	</Button>
 </div>

frontend/src/lib/components/landing/ScriptBox.svelte

@@ -34,7 +34,7 @@
 	</div>
 	<div class="flex flex-row-reverse gap-x-2">
 		<Button
-			on:click={() => goto(`/scripts/edit/${script.hash}?step=2`)}
+			href="/scripts/edit/{script.hash}?step=2"
 			color="dark"
 			size="xs"
 			variant="border"
@@ -44,7 +44,7 @@
 		</Button>
 
 		<Button
-			on:click={() => goto(`/scripts/run/${script.hash}`)}
+			href="/scripts/run/{script.hash}"
 			color="dark"
 			size="xs"
 			variant="border"

frontend/src/lib/components/landing/ScriptGettingStarted.svelte

@@ -17,7 +17,7 @@
 	</div>
 	<div class="inline-flex flex-wrap gap-y-2">
 		<Button
-			on:click={() => goto('scripts/add')}
+			href="/scripts/add"
 			color="dark"
 			size="xs"
 			btnClasses="mr-2"