Add support for global context fetched server side. Usefull for fetching auth config on start.

Author: kevinpiac

frontend/src/lib/components/common/logo/AgentLabsLogo.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import logo from "$lib/assets/img/logo-white.svg";
+</script>
+
+<img alt="AgentLabs Logo" src={logo} />

frontend/src/routes/+layout.server.ts

@@ -0,0 +1,19 @@
+import type { ServerLoad } from "@sveltejs/kit";
+import type { MainLayoutContext } from "./types";
+
+const waitForDelayMs = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const load: ServerLoad = async (): Promise<MainLayoutContext> => {
+	return {
+		lazy: {
+			context: new Promise((resolve) => {
+				return waitForDelayMs(1000).then(() => {
+					resolve({
+						tenantName: "AgentLabs Team",
+						allowedSignInMethods: ["passwordless-email", "google", "github", "gitlab"]
+					});
+				});
+			})
+		}
+	};
+};

frontend/src/routes/+layout.svelte

@@ -1,5 +1,17 @@
-<script>
-    import '../app.css';
+<script lang="ts">
+	import type { LayoutData } from "./$types";
+	import "../app.css";
+	import AgentLabsLogo from "$lib/components/common/logo/AgentLabsLogo.svelte";
+
+	export let data: LayoutData;
 </script>
 
-<slot></slot>
+{#await data.lazy.context}
+	<div class="min-h-screen bg-background-primary flex items-center justify-center">
+		<div class="flex flex-col animate-pulse">
+			<AgentLabsLogo />
+		</div>
+	</div>
+{:then context}
+	<slot />
+{/await}

frontend/src/routes/types.ts

@@ -0,0 +1,11 @@
+export const SignInMethods = ["passwordless-email", "google", "github", "gitlab"] as const;
+export type SignInMethod = (typeof SignInMethods)[number];
+
+export type MainLayoutContext = {
+	lazy: {
+		context: Promise<{
+			tenantName: string;
+			allowedSignInMethods: SignInMethod[];
+		}>;
+	};
+};