From 02b55ab7b53244d34b37fe73ddcb7e1ec41720ea Mon Sep 17 00:00:00 2001
From: Phil Prasek <prasek@gmail.com>
Date: Thu, 5 Sep 2024 19:18:50 -0700
Subject: [PATCH] update orders page to show progress

Signed-off-by: Phil Prasek <prasek@gmail.com>
---
 .../orders/(order)/[id]/+page.server.ts       |  3 ++-
 src/routes/orders/(order)/[id]/+page.svelte   | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/routes/orders/(order)/[id]/+page.server.ts b/src/routes/orders/(order)/[id]/+page.server.ts
index 42a93f4..486dfd8 100644
--- a/src/routes/orders/(order)/[id]/+page.server.ts
+++ b/src/routes/orders/(order)/[id]/+page.server.ts
@@ -1,6 +1,7 @@
 import { env } from '$env/dynamic/private';
 
-export const load = async ({ params }) => {
+export const load = async ({ params, depends }) => {
+	depends('data:order')
 	const { id } = params;
 
 	const orderResponse = await fetch(`${env.ORDER_API_URL}/orders/${id}`);
diff --git a/src/routes/orders/(order)/[id]/+page.svelte b/src/routes/orders/(order)/[id]/+page.svelte
index ec7cb88..f1cf730 100644
--- a/src/routes/orders/(order)/[id]/+page.svelte
+++ b/src/routes/orders/(order)/[id]/+page.svelte
@@ -1,9 +1,28 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { invalidate } from '$app/navigation';
 	import FulfillmentDetails from '$lib/components/fulfillment-details.svelte';
 	import OrderActions from '$lib/components/order-actions.svelte';
 
 	$: ({ order } = $page.data);
+
+	onMount(() => {
+		const finalStatuses = ['completed', 'failed', 'cancelled'];
+
+		const interval = setInterval(() => {
+			const isFinal = finalStatuses.includes(order.status);
+			if (!isFinal) {
+				invalidate('data:order');
+			} else {
+				clearInterval(interval);
+			}
+		}, 500);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
 </script>
 
 <section>