feat: load data in parallel to accelerate page loading speed

src/routes/(app)/+layout.svelte

@@ -59,64 +59,72 @@
 	onMount(async () => {
 		if ($user === undefined || $user === null) {
 			await goto('/auth');
-		} else if (['user', 'admin'].includes($user?.role)) {
+			return;
+		}
+		if (!['user', 'admin'].includes($user?.role)) {
+			return;
+		}
+
+		const chatInputKeys = Object.keys(localStorage).filter((key) => key.startsWith('chat-input'));
+		if (chatInputKeys.length > 0) {
+			chatInputKeys.forEach((key) => {
+				localStorage.removeItem(key);
+			});
+		}
+
+		const loadChatsFromDB = async () => {
 			try {
 				// Check if IndexedDB exists
 				DB = await openDB('Chats', 1);
 
-				if (DB) {
+				if (!DB) {
-					const chats = await DB.getAllFromIndex('chats', 'timestamp');
+					return;
-					localDBChats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
-
-					if (localDBChats.length === 0) {
-						await deleteDB('Chats');
-					}
 				}
 
-				console.log(DB);
+				const chats = await DB.getAllFromIndex('chats', 'timestamp');
+				localDBChats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
+
+				if (localDBChats.length === 0) {
+					await deleteDB('Chats');
+				}
 			} catch (error) {
 				// IndexedDB Not Found
 			}
+		};
 
-			const chatInputKeys = Object.keys(localStorage).filter((key) => key.startsWith('chat-input'));
+		const loadUserSettings = async (): Promise<Parameters<(typeof settings)['set']>[0]> => {
-			if (chatInputKeys.length > 0) {
-				chatInputKeys.forEach((key) => {
-					localStorage.removeItem(key);
-				});
-			}
-
 			const userSettings = await getUserSettings(localStorage.token).catch((error) => {
 				console.error(error);
 				return null;
 			});
 
 			if (userSettings) {
-				settings.set(userSettings.ui);
+				return userSettings.ui;
-			} else {
-				let localStorageSettings = {} as Parameters<(typeof settings)['set']>[0];
-
-				try {
-					localStorageSettings = JSON.parse(localStorage.getItem('settings') ?? '{}');
-				} catch (e: unknown) {
-					console.error('Failed to parse settings from localStorage', e);
-				}
-
-				settings.set(localStorageSettings);
 			}
 
+			try {
+				return JSON.parse(localStorage.getItem('settings') ?? '{}');
+			} catch (e: unknown) {
+				console.error('Failed to parse settings from localStorage', e);
+				return {};
+			}
+		};
+
+		const loadModels = async () => {
 			models.set(
 				await getModels(
 					localStorage.token,
-					$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
+					$config?.features?.enable_direct_connections
+						? ($settings?.directConnections ?? null)
+						: null
 				)
 			);
+		};
 
-			banners.set(await getBanners(localStorage.token));
+		const loadToolServers = async () => {
-			tools.set(await getTools(localStorage.token));
-
 			let toolServersData = await getToolServersData($settings?.toolServers ?? []);
 			toolServersData = toolServersData.filter((data) => {
-				if (data.error) {
+				if (!data || data.error) {
 					toast.error(
 						$i18n.t(`Failed to connect to {{URL}} OpenAPI tool server`, {
 							URL: data?.url
@@ -127,7 +135,31 @@
 				return true;
 			});
 			toolServers.set(toolServersData);
+		};
 
+		const loadBanners = async () => {
+			const bannersData = await getBanners(localStorage.token);
+			banners.set(bannersData);
+		};
+
+		const loadTools = async () => {
+			const toolsData = await getTools(localStorage.token);
+			tools.set(toolsData);
+		};
+
+		// Parallel loading
+		await Promise.all([
+			loadChatsFromDB(),
+			loadBanners(),
+			loadTools(),
+			loadUserSettings().then((loadedSettings) => {
+				settings.set(loadedSettings);
+				// The following functions are dependent on the settings
+				return Promise.all([loadModels(), loadToolServers()]);
+			})
+		]);
+
+		const setupKeyboardShortcuts = () => {
 			document.addEventListener('keydown', async function (event) {
 				const isCtrlPressed = event.ctrlKey || event.metaKey; // metaKey is for Cmd key on Mac
 				// Check if the Shift key is pressed
@@ -225,37 +257,38 @@
 					}, 0);
 				}
 			});
+		};
+		setupKeyboardShortcuts();
 
-			if ($user?.role === 'admin' && ($settings?.showChangelog ?? true)) {
+		if ($user?.role === 'admin' && ($settings?.showChangelog ?? true)) {
-				showChangelog.set($settings?.version !== $config.version);
+			showChangelog.set($settings?.version !== $config.version);
+		}
+
+		if ($user?.role === 'admin' || ($user?.permissions?.chat?.temporary ?? true)) {
+			if ($page.url.searchParams.get('temporary-chat') === 'true') {
+				temporaryChatEnabled.set(true);
 			}
 
-			if ($user?.role === 'admin' || ($user?.permissions?.chat?.temporary ?? true)) {
+			if ($user?.role !== 'admin' && $user?.permissions?.chat?.temporary_enforced) {
-				if ($page.url.searchParams.get('temporary-chat') === 'true') {
+				temporaryChatEnabled.set(true);
-					temporaryChatEnabled.set(true);
-				}
-
-				if ($user?.role !== 'admin' && $user?.permissions?.chat?.temporary_enforced) {
-					temporaryChatEnabled.set(true);
-				}
 			}
+		}
 
-			// Check for version updates
+		// Check for version updates
-			if ($user?.role === 'admin' && $config?.features?.enable_version_update_check) {
+		if ($user?.role === 'admin' && $config?.features?.enable_version_update_check) {
-				// Check if the user has dismissed the update toast in the last 24 hours
+			// Check if the user has dismissed the update toast in the last 24 hours
-				if (localStorage.dismissedUpdateToast) {
+			if (localStorage.dismissedUpdateToast) {
-					const dismissedUpdateToast = new Date(Number(localStorage.dismissedUpdateToast));
+				const dismissedUpdateToast = new Date(Number(localStorage.dismissedUpdateToast));
-					const now = new Date();
+				const now = new Date();
 
-					if (now - dismissedUpdateToast > 24 * 60 * 60 * 1000) {
+				if (now - dismissedUpdateToast > 24 * 60 * 60 * 1000) {
-						checkForVersionUpdates();
-					}
-				} else {
 					checkForVersionUpdates();
 				}
+			} else {
+				checkForVersionUpdates();
 			}
-			await tick();
 		}
+		await tick();
 
 		loaded = true;
 	});