Return token promise instead of token, speeds up page loading a lot

src/routes/services/+page.server.ts

@@ -1,27 +1,61 @@
-import { io } from 'socket.io-client';
+import { io, Socket } from 'socket.io-client';
 import * as fs from 'fs';
 
 export async function load() {
-	const credFile = './credentials.json';
+	const promise = getJwt();
+
+	return {
+		promise
+	};
+}
+
+async function getJwt(): Promise<string> {
 	const socket = io('https://status.neshweb.net/');
-
+	const credFile = './credentials.json';
 	let token = '';
+	let valid = false;
 
-	socket.on('connect', () => {
+	if (fs.existsSync(credFile)) {
+		const content = fs.readFileSync(credFile);
+		token = content.toString();
+	}
+
+	socket.on('connect', async () => {
+		if (token == '') {
+			token = await login(socket);
+			valid = true;
+		} else {
+			socket.emit('loginByToken', token, async (res) => {
+				if (!res.ok) {
+					token = await login(socket);
+				}
+				valid = true;
+			});
+		}
+	});
+
+	while (!valid) {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	}
+
+	fs.writeFileSync(credFile, token);
+
+	return token;
+}
+
+async function login(socket: Socket): Promise<string> {
+	let token = '';
 	socket.emit(
 		'login',
 		{ username: process.env.KUMA_USERNAME, password: process.env.KUMA_PASSWORD, token: '' },
-			(res) => {
+		(res: { token: string }) => {
 			token = res.token;
 		}
 	);
-	});
 
 	while (token == '') {
 		await new Promise((resolve) => setTimeout(resolve, 10));
 	}
 
-	return {
+	return token;
-		token
-	};
 }

src/routes/services/+page.svelte

@@ -6,11 +6,13 @@
 	import { io } from 'socket.io-client';
 	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
 
-	let { data }: { data: { token: string } } = $props();
+	let { data }: { data: { promise: Promise<string> } } = $props();
 
-	$effect(() => {
+	let token = $state();
-		console.log('Data:', data.token);
+
-	});
+	data.promise.then((jwt) => {
+		token = jwt;
+	})
 
 	let services: readonly Service[] = $state.frozen([]);
 
@@ -21,11 +23,11 @@
 	//let token = $props();
 
 	$effect(() => {
-		if (data.token) {
+		if (token) {
 			const socket = io('https://status.neshweb.net/');
 
 			socket.on('connect', () => {
-				socket.emit('loginByToken', data.token, (res) => {
+				socket.emit('loginByToken', token, () => {
 
 				});
 			});