From fca5940e802aa53d10cb00f4bce52c07f38f11f7 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 16 Nov 2022 15:35:22 +0100
Subject: [PATCH] visual hints when buttons are loading goto

---
 .../lib/components/common/button/Button.svelte | 18 +++++++++++++++---
 .../landing/FlowGettingStarted.svelte          |  8 +-------
 .../components/landing/FlowLandingBox.svelte   |  4 ++--
 .../landing/RessourceGettingStarted.svelte     |  2 +-
 .../lib/components/landing/ScriptBox.svelte    |  4 ++--
 .../landing/ScriptGettingStarted.svelte        |  2 +-
 6 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index d055ab318c..862d073f09 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/landing/FlowGettingStarted.svelte b/frontend/src/lib/components/landing/FlowGettingStarted.svelte
index 1987c78180..2b036a9e14 100644
--- a/frontend/src/lib/components/landing/FlowGettingStarted.svelte
+++ b/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
diff --git a/frontend/src/lib/components/landing/FlowLandingBox.svelte b/frontend/src/lib/components/landing/FlowLandingBox.svelte
index 0ca7ab5f91..7624ad29df 100644
--- a/frontend/src/lib/components/landing/FlowLandingBox.svelte
+++ b/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"
diff --git a/frontend/src/lib/components/landing/RessourceGettingStarted.svelte b/frontend/src/lib/components/landing/RessourceGettingStarted.svelte
index e6da9b0379..d4ec17b2aa 100644
--- a/frontend/src/lib/components/landing/RessourceGettingStarted.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/landing/ScriptBox.svelte b/frontend/src/lib/components/landing/ScriptBox.svelte
index cd81f6cc89..fcb1d6de4c 100644
--- a/frontend/src/lib/components/landing/ScriptBox.svelte
+++ b/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"
diff --git a/frontend/src/lib/components/landing/ScriptGettingStarted.svelte b/frontend/src/lib/components/landing/ScriptGettingStarted.svelte
index c1c3876648..e1865f9318 100644
--- a/frontend/src/lib/components/landing/ScriptGettingStarted.svelte
+++ b/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"