From 9ddffb1ec1f2c3e7a0026c821be5ded6eea9afb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Sat, 17 Aug 2024 20:16:49 +0200
Subject: [PATCH] feat: ensure all resources are loaded before mount (#2430)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
---
 frontend/src/assets/styles/index.css |  3 +++
 frontend/src/main.ts                 | 18 +++++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/assets/styles/index.css

diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
new file mode 100644
index 00000000000..9b422cfa28d
--- /dev/null
+++ b/frontend/src/assets/styles/index.css
@@ -0,0 +1,3 @@
+@import url('@fontsource-variable/figtree');
+@import url('@unocss/reset/tailwind-compat.css');
+@import url('./global.css');
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5ee4f3a67d5..9e9a01cea74 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,8 +3,9 @@
  * for TypeScript compiler (check tsconfig.json)
  * https://caniuse.com/mdn-javascript_operators_await_top_level
  */
-import { createApp } from 'vue';
+import { createApp, effectScope } from 'vue';
 import { routes } from 'vue-router/auto-routes';
+import { useEventListener } from '@vueuse/core';
 import Root from '@/App.vue';
 import { hideDirective } from '@/plugins/directives';
 import { vuePlugin as i18n } from '@/plugins/i18n';
@@ -14,19 +15,15 @@ import { vuetify } from '@/plugins/vuetify';
 /**
  * - GLOBAL STYLES -
  */
-import '@fontsource-variable/figtree';
-/* eslint-disable-next-line import/no-extraneous-dependencies */
-import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 import 'virtual:unocss-devtools';
-import '@/assets/styles/global.css';
+import '@/assets/styles/index.css';
 
 /**
  * - VUE PLUGINS, STORE AND DIRECTIVE -
  * The order of statements IS IMPORTANT
  */
 const remote = createRemote();
-
 const app = createApp(Root);
 
 /**
@@ -44,10 +41,13 @@ app.use(vuetify);
 app.directive('hide', hideDirective);
 
 /**
- * This ensures the transition plays: https://router.vuejs.org/guide/migration/#all-navigations-are-now-always-asynchronous
- * Also ensures Suspense component's content has loaded on first navigation (refer to RouterViewTransition component)
+ * Ensure everything is fully loaded before mounting the app
  */
-await router.isReady();
+await Promise.all([
+  router.isReady(),
+  ...[...document.fonts.keys()].map(font => font.load())
+]);
+await document.fonts.ready;
 
 /**
  * MOUNTING POINT