From c365d6d56beacc4571e9eec5a0d56f6179dbcd79 Mon Sep 17 00:00:00 2001
From: Valerian Saliou <valerian@valeriansaliou.name>
Date: Wed, 18 Oct 2023 20:24:42 +0200
Subject: [PATCH] refactor: load wasm dependency pre-routing

This way, the Prose loader shows during the time of the WASM dependency loading. Before this refactor was done, there would be a time between the bootloader logo and the app first paint where the app would show as white, as the WASM loading would block routing.
---
 src/main.ts         |  7 +++++++
 src/router/index.ts | 26 +++++---------------------
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index c9a0dd8e..aa06a018 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,7 @@
 
 // NPM
 import { createApp } from "vue";
+import { default as proseSDKJS } from "@prose-im/prose-sdk-js";
 
 // PROJECT: STYLES
 import "@/assets/stylesheets/all.scss";
@@ -28,6 +29,12 @@ import BootstrapFilters from "@/bootstrap/filters";
 import BootstrapComponents from "@/bootstrap/components";
 import BootstrapPlugins from "@/bootstrap/plugins";
 
+/**************************************************************************
+ * DEPENDENCIES
+ * ************************************************************************* */
+
+await proseSDKJS();
+
 /**************************************************************************
  * INSTANCES
  * ************************************************************************* */
diff --git a/src/router/index.ts b/src/router/index.ts
index c1c00502..4cf89380 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,7 +15,7 @@ import {
   createRouter,
   createWebHistory
 } from "vue-router";
-import init, { JID } from "@prose-im/prose-sdk-js";
+import { JID } from "@prose-im/prose-sdk-js";
 
 // PROJECT: VIEWS
 import AppBase from "@/views/app/AppBase.vue";
@@ -50,7 +50,6 @@ enum NavigateState {
 class Router {
   private readonly __router: VueRouter;
 
-  private __wasmModuleInitialized = false;
   private __lastNavigateStatePosition = 0;
   private __pendingNavigateState: NavigateState | null = null;
 
@@ -70,8 +69,7 @@ class Router {
           component: StartLogin,
 
           beforeEnter: (_to, _from, next) => {
-            this.__initializeWasmModule()
-              .then(this.__guardAnonymous.bind(this))
+            this.__guardAnonymous()
               .then(next)
               .catch(error => {
                 if (error) {
@@ -89,8 +87,7 @@ class Router {
           component: AppBase,
 
           beforeEnter: (_to, _from, next) => {
-            this.__initializeWasmModule()
-              .then(this.__guardAuthenticated.bind(this))
+            this.__guardAuthenticated()
               .then(this.__setupBrokerClient.bind(this))
               .then(next)
               .catch(error => {
@@ -130,16 +127,7 @@ class Router {
     app.use(this.__router);
   }
 
-  private async __initializeWasmModule() {
-    // Not already initialized?
-    if (this.__wasmModuleInitialized !== true) {
-      this.__wasmModuleInitialized = true;
-
-      await init();
-    }
-  }
-
-  private __guardAuthenticated(): Promise<void> {
+  private async __guardAuthenticated(): Promise<void> {
     // Ensure that user is logged in (redirect to base if not)
     if (!Store.$account.credentials.jid) {
       this.__router.push({
@@ -148,11 +136,9 @@ class Router {
 
       return Promise.reject();
     }
-
-    return Promise.resolve();
   }
 
-  private __guardAnonymous(): Promise<void> {
+  private async __guardAnonymous(): Promise<void> {
     // Ensure that user is not logged-in (redirect to app if so)
     if (Store.$account.credentials.jid) {
       this.__router.push({
@@ -161,8 +147,6 @@ class Router {
 
       return Promise.reject();
     }
-
-    return Promise.resolve();
   }
 
   private async __setupBrokerClient(): Promise<void> {