Revert loading lang on mount

src/lib/Drawer/SettingsButton.svelte

@@ -3,14 +3,38 @@
 	import { openModal } from 'svelte-modals';
 	import Icon from '@iconify/svelte';
 	import Ripple from 'svelte-ripple';
+	import { base } from '$app/paths';
 
 	export let data: any;
 
+	let languages: {
+		id: string;
+		label: string;
+	}[];
+
 	/**
 	 * Gets languages and opens modal
 	 */
 	async function handleClick() {
-		openModal(() => import('$lib/Settings/Index.svelte'), { data });
+		const getIntlName = (code: string, displayLanguage = code) => {
+			const name = new Intl.DisplayNames([displayLanguage], { type: 'language' }).of(code);
+			return (name || code).charAt(0).toUpperCase() + (name || code).slice(1);
+		};
+		try {
+			const response = await fetch(`${base}/_api/list_languages`);
+			const data = await response.json();
+			if (response.ok) {
+				languages = data.map((code: string) => ({
+					id: code,
+					label: getIntlName(code)
+				}));
+			} else {
+				throw new Error(`${response.status}, ${data.message}`);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+		openModal(() => import('$lib/Settings/Index.svelte'), { data, languages });
 	}
 
 	/**

src/lib/Settings/Index.svelte

@@ -14,6 +14,11 @@
 	export let data: any;
 	export let isOpen: boolean;
 
+	export let languages: {
+		id: string;
+		label: string;
+	}[];
+
 	let formElement: HTMLFormElement;
 	let timeout: ReturnType<typeof setTimeout> | null;
 	let responseCode: number | undefined;
@@ -101,7 +106,7 @@
 		<h1 slot="title">{$lang('settings')}</h1>
 
 		<form id="settings" name="settings" bind:this={formElement}>
-			<Language />
+			<Language {languages} />
 
 			<Addons {data} />
 

src/lib/Settings/Language.svelte

@@ -2,39 +2,12 @@
 	import { base } from '$app/paths';
 	import { translation, selectedLanguage, lang } from '$lib/Stores';
 	import Select from '$lib/Components/Select.svelte';
-	import { onMount } from 'svelte';
 
-	let languages: {
+	export let languages: {
 		id: string;
 		label: string;
 	}[];
 
-	/**
-	 * Get languages
-	 */
-	onMount(async () => {
-		const getIntlName = (code: string, displayLanguage = code) => {
-			const name = new Intl.DisplayNames([displayLanguage], { type: 'language' }).of(code);
-			return (name || code).charAt(0).toUpperCase() + (name || code).slice(1);
-		};
-
-		try {
-			const response = await fetch(`${base}/_api/list_languages`);
-			const data = await response.json();
-
-			if (response.ok) {
-				languages = data.map((code: string) => ({
-					id: code,
-					label: getIntlName(code)
-				}));
-			} else {
-				throw new Error(`${response.status}, ${data.message}`);
-			}
-		} catch (error) {
-			console.error(error);
-		}
-	});
-
 	async function loadSelectedLang(value: string) {
 		$selectedLanguage = value;
 
@@ -67,7 +40,7 @@
 	<a {href} target="blank">{href}</a>
 </p>
 
-{#if languages}
+{#if languages.length !== 0}
 	<Select
 		options={languages}
 		placeholder={$lang('language')}