fix: load previews async

apps/ui/src/routes/applications/[id]/previews.svelte

@@ -1,12 +1,10 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async ({ fetch, params, stuff, url }) => {
+	export const load: Load = async ({ stuff, url }) => {
 		try {
-			const response = await get(`/applications/${params.id}/previews`);
 			return {
 				props: {
-					application: stuff.application,
-					...response
+					application: stuff.application
 				}
 			};
 		} catch (error) {
@@ -19,10 +17,7 @@
 </script>
 
 <script lang="ts">
-	export let containers: any;
 	export let application: any;
-	export let PRMRSecrets: any;
-	export let applicationSecrets: any;
 	import Secret from './_Secret.svelte';
 	import { get, post } from '$lib/api';
 	import { page } from '$app/stores';
@@ -31,8 +26,15 @@
 	import { t } from '$lib/translations';
 	import { goto } from '$app/navigation';
 	import { errorNotification, getDomain } from '$lib/common';
+	import { onMount } from 'svelte';
+	import Loading from '$lib/components/Loading.svelte';
 
 	const { id } = $page.params;
+
+	let containers: any;
+	let PRMRSecrets: any;
+	let applicationSecrets: any;
+	let loading = true;
 	async function refreshSecrets() {
 		const data = await get(`/applications/${id}/secrets`);
 		PRMRSecrets = [...data.secrets];
@@ -55,6 +57,19 @@
 			return errorNotification(error);
 		}
 	}
+	onMount(async () => {
+		try {
+			loading = true;
+			const response = await get(`/applications/${id}/previews`);
+			containers = response.containers;
+			PRMRSecrets = response.PRMRSecrets;
+			applicationSecrets = response.applicationSecrets;
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			loading = false;
+		}
+	});
 </script>
 
 <div class="flex items-center space-x-2 p-5 px-6 font-bold">
@@ -62,7 +77,7 @@
 		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
 			Preview Deployments
 		</div>
-		<span class="text-xs">{application.name} </span>
+		<span class="text-xs">{application?.name}</span>
 	</div>
 	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
 		<a
@@ -108,7 +123,10 @@
 		</a>
 	{/if}
 </div>
-<div class="mx-auto max-w-6xl px-6 pt-4">
+{#if loading}
+	<Loading />
+{:else}
+	<div class="mx-auto max-w-6xl px-6 pt-4">
 		<div class="flex justify-center py-4 text-center">
 			<Explainer
 				customClass="w-full"
@@ -147,9 +165,9 @@
 				</tbody>
 			</table>
 		{/if}
-</div>
+	</div>
 
-<div class="mx-auto max-w-4xl py-10">
+	<div class="mx-auto max-w-4xl py-10">
 		<div class="flex flex-wrap justify-center space-x-2">
 			{#if containers.length > 0}
 				{#each containers as container}
@@ -172,4 +190,5 @@
 				</div>
 			{/if}
 		</div>
-</div>
+	</div>
+{/if}