"fixed" localization issue

Author: DexrnZacAttack

CONTRIBUTING.md

@@ -9,12 +9,12 @@ For translations, the target language of this site is English, so you should bas
 under [/src/Assets/L10N](/src/Assets/L10N) there are JSON files for the existing supported languages.   
 For adding your own, copy the [en-us.json](/src/Assets/L10N/en-us.json) file and rename it with the correct locale code for the targeted language. (e.g Japanese would be `ja.json`)
 
-To have the language work on the site, add the language translation to the JSON file, then go to [main.ts](/src/main.ts#L29) and add a new line.   
+To have the language work on the site, add the language translation to the JSON file, then go to [main.ts](/src/main.ts#L27) and add a new line.   
 The line should look like this (using Japanese as an example):
-```register('ja', () => import('./Assets/L10N/ja.json'));```   
+`addMessages('ja', await import('./L10N/ja.json') as never);`
 
 Which boils down to:
-```register('language-code', () => import('./Assets/L10N/language-code.json'));```   
+`addMessages('language-code', await import('./L10N/language-code.json') as never);`
 
 To find a list of Language Codes using Firefox, go to `about:preferences`, search `language`, and choose `Choose your preferred language for displaying pages`, then find your language and look at the code (in the square brackets)   
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "project-lodestone-website",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,7 +24,7 @@
     "vite": "^6.2.2"
   },
   "dependencies": {
-    "@team-lodestone/lodestone-ui": "^1.3.4",
+    "@team-lodestone/lodestone-ui": "^1.3.5",
     "svelte-i18n": "^4.0.1"
   }
 }

package.json

@@ -47,6 +47,4 @@
     <ButtonLink class="button topbarButton" href="https://github.com/team-lodestone/team-lodestone.github.io" title={$t('footer.buttons.openSource.title')}>{$t('footer.buttons.openSource.text')}</ButtonLink>
     <ButtonLink class="button topbarButton" href="https://team-lodestone.github.io/Documentation/Team" title={$t('footer.buttons.openTeam.title')}>{$t('footer.buttons.openTeam.text')}</ButtonLink>
   </Footer>
-{:else}
-  <h1>Loading</h1>
 {/if}

src/App.svelte

@@ -2,7 +2,7 @@
     import {Dialog, DropDownBox} from "@team-lodestone/lodestone-ui";
 		import { locales, locale } from 'svelte-i18n'
     import { _ as t } from 'svelte-i18n'
-		import { initL10N } from '../../main';
+		import { setupL10N } from '../../main';
 
     let dialog: Dialog;
 
@@ -13,7 +13,7 @@
 		function setLanguage(e: Event): void {
 			// UNTESTED (can't test until new language is added)
 			localStorage.setItem("language", (e.currentTarget as HTMLSelectElement).value)
-			initL10N();
+			setupL10N();
 		}
 </script>
 

src/Components/Dialogs/LanguageDialog.svelte

@@ -18,12 +18,19 @@ export const url = "https://team-lodestone.github.io"
 // endregion
 
 // region l10n
-import {getLocaleFromNavigator, init, register} from 'svelte-i18n'
+import { getLocaleFromNavigator, init, addMessages, register } from 'svelte-i18n';
+import { initLUILanguages } from "@team-lodestone/lodestone-ui";
 
-// has to have US bc browser returns en-US instead of en
-register('en-US', async () => await import('./Assets/L10N/en-us.json'));
-register('fr', async () => await import('./Assets/L10N/fr.json'));
-register('ru', async () => await import('./Assets/L10N/ru.json'));
+const initL10N = async () => {
+  // has to have US bc browser returns en-US instead of en
+  // also use addMessages over register to avoid flash of content while loading other language during switch.
+  addMessages('en-US', (await import('./Assets/L10N/en-us.json')) as never);
+  addMessages('fr', (await import('./Assets/L10N/fr.json')) as never);
+  addMessages('ru', (await import('./Assets/L10N/ru.json')) as never);
+
+  // setup l10n
+  await setupL10N();
+}
 
 const getLanguage = (): string | null => {
   const lang = localStorage.getItem("language");
@@ -32,15 +39,28 @@ const getLanguage = (): string | null => {
   else return getLocaleFromNavigator();
 }
 
-export const initL10N = async () => await init({ fallbackLocale: 'en-US', initialLocale: getLanguage(), warnOnMissingMessages: true });
-
-initL10N();
+export const setupL10N = async () => {
+  await initLUILanguages({ fallbackLocale: 'en-US', initialLocale: getLanguage(), warnOnMissingMessages: true });
+  await init({ fallbackLocale: 'en-US', initialLocale: getLanguage(), warnOnMissingMessages: true });
+}
 // endregion
 
+
 // region app
-const app = mount(App, {
-  target: document.getElementById('app')!,
-})
+let app: { $set?: any, $on?: any } | undefined = undefined;
+
+async function initApp() {
+  await initL10N();
+
+  return mount(App, {
+    target: document.getElementById('app')!,
+  })
+}
+
+// if we don't wait for initL10N we get locale loading race condition afaik
+initApp().then((mounted) => {
+  app = mounted;
+});
 
-export default app
+export default app;
 // endregion

src/main.ts

@@ -16,6 +16,6 @@ export default defineConfig({
     }),
   ],
   server: {
-    allowedHosts: ['localhost', '127.0.0.1', 'team-lodestone.github.io', 'b6e7-146-70-211-58.ngrok-free.app'],
+    allowedHosts: ['localhost', '127.0.0.1', 'team-lodestone.github.io'],
   }
 })