From 8ff412acc499878d3fe48a5f4ccb0adedd87982e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 19 Nov 2023 18:26:22 +0100
Subject: [PATCH] fix: add refresh button to item picker

---
 frontend/src/lib/components/ItemPicker.svelte | 37 +++++++++++++++----
 .../common/skeleton/Skeleton.svelte           | 16 +++++---
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
index 6a27c7e85c..08c63be5e5 100644
--- a/frontend/src/lib/components/ItemPicker.svelte
+++ b/frontend/src/lib/components/ItemPicker.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { RotateCw } from 'lucide-svelte'
 	import { Button, Drawer, Skeleton } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import NoItemFound from './home/NoItemFound.svelte'
@@ -26,14 +27,19 @@
 
 	export function openDrawer() {
 		loading = true
-		loadItems().then((v) => {
-			items = v
-			loading = false
-		})
+		loadItems()
+			.then((v) => {
+				items = v
+			})
+			.finally(() => {
+				loading = false
+			})
 		drawer.openDrawer?.()
 	}
 
 	let drawer: Drawer
+
+	let refreshing = false
 </script>
 
 <SearchItems
@@ -58,7 +64,7 @@
 		on:close={drawer.closeDrawer}
 	>
 		<div class="w-full h-full flex flex-col">
-			<div class="w-12/12 pb-4">
+			<div class="flex flex-row gap-2 pb-4">
 				<input
 					type="text"
 					placeholder="Search {itemName}s"
@@ -66,10 +72,27 @@
 					class="search-item"
 					autofocus
 				/>
+				<Button
+					color="light"
+					variant="border"
+					on:click={() => {
+						refreshing = true
+						loadItems()
+							.then((v) => {
+								items = v
+							})
+							.finally(() => {
+								loading = false
+								refreshing = false
+							})
+					}}
+					iconOnly
+					startIcon={{ icon: RotateCw, classes: loading || refreshing ? 'animate-spin' : '' }}
+				/>
 			</div>
 			{#if loading}
-				{#each new Array(6) as _}
-					<Skeleton layout={[[2], 0.7]} />
+				{#each new Array(3) as _}
+					<Skeleton layout={[[5], 0.2]} />
 				{/each}
 			{:else if !items?.length}
 				<div class="text-center text-sm text-tertiary mt-2">
diff --git a/frontend/src/lib/components/common/skeleton/Skeleton.svelte b/frontend/src/lib/components/common/skeleton/Skeleton.svelte
index 46196a62eb..8e164b4efa 100644
--- a/frontend/src/lib/components/common/skeleton/Skeleton.svelte
+++ b/frontend/src/lib/components/common/skeleton/Skeleton.svelte
@@ -1,20 +1,26 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition'
 	import { HEIGHT_UNIT, type SkeletonLayout } from './model'
 	import SkeletonElement from './SkeletonElement.svelte'
+	import { onMount } from 'svelte'
 
 	export let layout: SkeletonLayout
 	export let loading = true
 	export let overlay = false
+
+	export let mounted = false
+	onMount(() => {
+		setTimeout(() => {
+			mounted = true
+		}, 10)
+	})
 </script>
 
 {#if loading}
 	<div class="relative flex justify-center">
 		<div
-			in:fade|local={{ duration: 1000 }}
-			class="flex grow flex-col overflow-hidden {overlay
-				? 'absolute w-full h-full z-[1000]'
-				: ''} {$$props.class}"
+			class="flex grow flex-col overflow-hidden transition-[opacity] duration-1000 opacity-0 {mounted
+				? 'opacity-100'
+				: ''} {overlay ? 'absolute w-full h-full z-[1000]' : ''} {$$props.class}"
 		>
 			{#each layout as row}
 				<div class="flex justify-between items-start gap-4">