update orders page to show progress

Signed-off-by: Phil Prasek <prasek@gmail.com>

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}`);

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>