From 3388eca2fe7ed3a3c1bd1b9e89a87a15bdf8e76e Mon Sep 17 00:00:00 2001
From: "pakintada@gmail.com" <Pakin>
Date: Tue, 17 Mar 2026 17:22:57 +0700
Subject: [PATCH] fix: warning noti change: add loading to overview recipe

Signed-off-by: pakintada@gmail.com <Pakin>
---
 src/lib/core/stores/noti.ts                   |  1 +
 .../(authed)/recipe/overview/+page.svelte     | 30 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/lib/core/stores/noti.ts b/src/lib/core/stores/noti.ts
index acdd5a3..65963f3 100644
--- a/src/lib/core/stores/noti.ts
+++ b/src/lib/core/stores/noti.ts
@@ -28,6 +28,7 @@ export function getNotification() {
 				toast.warning('Warning', {
 					description: msg
 				});
+				break;
 			default:
 				toast(msg);
 		}
diff --git a/src/routes/(authed)/recipe/overview/+page.svelte b/src/routes/(authed)/recipe/overview/+page.svelte
index d2938cf..5289ea5 100644
--- a/src/routes/(authed)/recipe/overview/+page.svelte
+++ b/src/routes/(authed)/recipe/overview/+page.svelte
@@ -2,6 +2,7 @@
 	import Button from '$lib/components/ui/button/button.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
 	import { SearchIcon } from '@lucide/svelte/icons';
+	import Spinner from '$lib/components/ui/spinner/spinner.svelte';
 
 	import DataTable from './data-table.svelte';
 	import { columns, type RecipeOverview } from './columns';
@@ -10,6 +11,7 @@
 		loadRecipe,
 		recipeData,
 		recipeFromServerQuery,
+		recipeLoading,
 		recipeOverviewData,
 		referenceFromPage
 	} from '$lib/core/stores/recipeStore.js';
@@ -23,6 +25,8 @@
 		recipes: []
 	});
 
+	let isRecipeLoading = $state(false);
+
 	let unsubRecipeData = recipeOverviewData.subscribe((rd) => {
 		if (rd) {
 			data.recipes = rd == null ? [] : rd;
@@ -40,6 +44,23 @@
 	onDestroy(() => {
 		unsubRecipeData();
 	});
+
+	$effect(() => {
+		const recipeFetchInterval = setInterval(async () => {
+			// schedule check if recipe is empty
+			if (data.recipes.length == 0) {
+				console.log('loading recipe ....');
+				recipeLoading.set(true);
+				// empty
+				await getRecipes();
+
+				setTimeout(() => recipeLoading.set(false), 3000);
+			}
+		}, 30000);
+		return () => {
+			clearInterval(recipeFetchInterval);
+		};
+	});
 </script>
 
 <div class="mx-8 flex">
@@ -66,7 +87,14 @@
 		<!-- table -->
 
 		<div class="w-full overflow-auto">
-			<DataTable data={data.recipes} refPage="overview" {columns} />
+			{#if $recipeLoading}
+				<div class="flex items-center justify-center">
+					<p class="mx-4">Please wait</p>
+					<Spinner />
+				</div>
+			{:else}
+				<DataTable data={data.recipes} refPage="overview" {columns} />
+			{/if}
 		</div>
 	</div>
 </div>