From 302fe292c062e8c4ffbfb8174985b601b919601c Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 14 Nov 2022 23:49:07 +0100
Subject: [PATCH] improve flow UX

---
 frontend/src/lib/components/ItemPicker.svelte | 28 ++++++++++++-------
 .../common/drawer/DrawerContent.svelte        |  1 +
 .../lib/components/flows/FlowEditor.svelte    |  9 +++---
 .../src/routes/flows/edit/[...path].svelte    |  6 +++-
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
index 5426f2a175..8b97528729 100644
--- a/frontend/src/lib/components/ItemPicker.svelte
+++ b/frontend/src/lib/components/ItemPicker.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import Fuse from 'fuse.js'
-	import { Drawer } from './common'
+	import { Drawer, Skeleton } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import IconedResourceType from './IconedResourceType.svelte'
+	import WindmillIcon from './icons/WindmillIcon.svelte'
 
 	type Item = Record<string, any>
 	export let pickCallback: (path: string, f: string) => void
@@ -12,6 +13,7 @@
 	export let closeOnClick = true
 	export let noItemMessage = ''
 
+	let loading = false
 	let items: Item[] | undefined = []
 	let filteredItems: Item[] | undefined = []
 	let itemsFilter = ''
@@ -23,11 +25,13 @@
 	const fuse: Fuse<Item> = new Fuse(items, fuseOptions)
 
 	export function openDrawer() {
+		loading = true
 		loadItems().then((v) => {
 			items = v
 			if (items) {
 				fuse.setCollection(items)
 			}
+			loading = false
 		})
 		drawer.openDrawer()
 	}
@@ -41,15 +45,19 @@
 <Drawer bind:this={drawer} size="600px">
 	<DrawerContent title="Search a {itemName}" on:close={drawer.closeDrawer}>
 		<div>
-			{#if filteredItems}
-				<div class="w-12/12 pb-4">
-					<input
-						type="text"
-						placeholder="Search {itemName}"
-						bind:value={itemsFilter}
-						class="search-item"
-					/>
-				</div>
+			<div class="w-12/12 pb-4">
+				<input
+					type="text"
+					placeholder="Search {itemName}"
+					bind:value={itemsFilter}
+					class="search-item"
+				/>
+			</div>
+			{#if loading}
+				{#each new Array(6) as _}
+					<Skeleton layout={[[2], 0.7]} />
+				{/each}
+			{:else if filteredItems}
 				<ul class="divide-y divide-gray-200">
 					{#each filteredItems as obj}
 						<li
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index 37123e18e0..5358fa20f7 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -13,6 +13,7 @@
 <div class="flex flex-col divide-y h-screen max-h-screen">
 	<div class="flex justify-between items-center gap-x-2">
 		<Button
+			btnClasses="m-1"
 			variant="border"
 			size="lg"
 			color="dark"
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 420366b553..e0d5820d7c 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -4,6 +4,7 @@
 	import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte'
 	import { flowStore } from './flowStore'
 	import WindmillIcon from '../icons/WindmillIcon.svelte'
+	import { Skeleton } from '../common'
 
 	export let initialPath: string
 	export let loading: boolean
@@ -14,10 +15,10 @@
 		<Pane size={25} minSize={20} class="h-full">
 			<div class="grow overflow-auto bg-gray h-full bg-gray-50 relative">
 				{#if loading}
-					<div class="w-full h-full">
-						<div class="block m-auto mt-40 w-10">
-							<WindmillIcon class="animate-[spin_6s_linear_infinite]" height="40px" width="40px" />
-						</div>
+					<div class="p-2 pt-10">
+						{#each new Array(6) as _}
+							<Skeleton layout={[[2], 1.5]} />
+						{/each}
 					</div>
 				{:else if $flowStore.value.modules}
 					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} root />
diff --git a/frontend/src/routes/flows/edit/[...path].svelte b/frontend/src/routes/flows/edit/[...path].svelte
index 1604ef80bc..c71e309851 100644
--- a/frontend/src/routes/flows/edit/[...path].svelte
+++ b/frontend/src/routes/flows/edit/[...path].svelte
@@ -20,6 +20,8 @@
 	let stateLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 	const initialArgs = decodeArgs($page.url.searchParams.get('args') ?? undefined)
 
+	let loading = false
+
 	let selectedId: string = 'settings-graph'
 
 	let flow: Flow = {
@@ -38,6 +40,7 @@
 	initFlow(flow)
 
 	async function loadFlow(): Promise<void> {
+		loading = true
 		flow =
 			stateLoadedFromUrl != undefined && stateLoadedFromUrl?.flow?.path == flow.path
 				? stateLoadedFromUrl.flow
@@ -48,6 +51,7 @@
 		initialPath = flow.path
 
 		await initFlow(flow)
+		loading = false
 		selectedId = stateLoadedFromUrl?.selectedId
 		$dirtyStore = false
 	}
@@ -59,4 +63,4 @@
 	}
 </script>
 
-<FlowBuilder {initialPath} {selectedId} {initialArgs} />
+<FlowBuilder {initialPath} {selectedId} {initialArgs} {loading} />