Reduce pageload flicker by adding backup font and moving locale initi…

…alization
StevenWeathers · Apr 7, 2024 · f3954cc · f3954cc
1 parent 68b45c9
commit f3954cc
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
@@ -4,7 +4,7 @@
   import '../node_modules/quill/dist/quill.core.css';
   import '../node_modules/quill/dist/quill.snow.css';
   import Navaid from 'navaid';
-  import { onDestroy, onMount } from 'svelte';
+  import { onDestroy } from 'svelte';
 
   import { AppConfig, appRoutes } from './config';
   import apiclient from './apiclient';
@@ -52,12 +52,12 @@
   import AdminSubscription from './pages/admin/Subscription.svelte';
   import { setLocale } from './i18n/i18n-svelte';
   import { detectLocale } from './i18n/i18n-util';
-  import { loadLocaleAsync } from './i18n/i18n-util.async';
   import Confirmation from './pages/subscription/Confirmation.svelte';
   import Pricing from './pages/subscription/Pricing.svelte';
   import PrivacyPolicy from './pages/support/PrivacyPolicy.svelte';
   import TermsConditions from './pages/support/TermsConditions.svelte';
   import Support from './pages/support/Support.svelte';
+  import { loadLocale } from './i18n/i18n-util.sync';
 
   const {
     FeaturePoker,
@@ -73,6 +73,10 @@
     activeWarrior = w;
   });
 
+  const detectedLocale = activeWarrior.locale || detectLocale();
+  loadLocale(detectedLocale);
+  setLocale(detectedLocale);
+
   $: if (document.dir !== $dir) {
     document.dir = $dir;
   }
@@ -529,12 +533,6 @@
     });
   }
 
-  onMount(async () => {
-    const detectedLocale = activeWarrior.locale || detectLocale();
-    await loadLocaleAsync(detectedLocale);
-    setLocale(detectedLocale);
-  });
-
   onDestroy(router.unlisten);
 </script>
 

diff --git a/ui/src/app.css b/ui/src/app.css
@@ -3,7 +3,7 @@
 @import 'tailwindcss/utilities';
 
 .font-rajdhani {
-  font-family: 'Rajdhani', sans-serif;
+  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
 }
 
 ::-webkit-calendar-picker-indicator {