Ensure that Olm is only loaded once

React 18's strict mode intentionally mounts all components twice, which was causing Olm to get double-loaded. Also, it doesn't need to be loaded if the app is running as a widget.

package.json

@@ -106,7 +106,8 @@
     ],
     "moduleNameMapper": {
       "\\.(css|less|svg)+$": "identity-obj-proxy",
-      "./IndexedDBWorker\\?worker": "<rootDir>/test/mocks/workerMock.ts"
+      "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
+      "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
     }
   }
 }

src/App.tsx

@@ -14,9 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Olm from "@matrix-org/olm";
+import React, { Suspense } from "react";
-import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
-import React, { Suspense, useEffect, useState } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
@@ -30,7 +28,7 @@ import { ClientProvider } from "./ClientContext";
 import { usePageFocusStyle } from "./usePageFocusStyle";
 import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
 import { InspectorContextProvider } from "./room/GroupCallInspector";
-import { CrashView, LoadingView } from "./FullScreenView";
+import { CrashView } from "./FullScreenView";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -39,58 +37,42 @@ interface AppProps {
 }
 
 export default function App({ history }: AppProps) {
-  const [olmLoaded, setOlmLoaded] = useState(false);
-
   usePageFocusStyle();
 
-  useEffect(() => {
-    if (!olmLoaded) {
-      // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-      window.OLM_OPTIONS = {};
-      Olm.init({ locateFile: () => olmWasmPath }).then(() =>
-        setOlmLoaded(true)
-      );
-    }
-  }, [olmLoaded, setOlmLoaded]);
-
   const errorPage = <CrashView />;
 
   return (
     <Router history={history}>
-      {olmLoaded ? (
+      <Suspense fallback={null}>
-        <Suspense fallback={null}>
+        <ClientProvider>
-          <ClientProvider>
+          <InspectorContextProvider>
-            <InspectorContextProvider>
+            <Sentry.ErrorBoundary fallback={errorPage}>
-              <Sentry.ErrorBoundary fallback={errorPage}>
+              <OverlayProvider>
-                <OverlayProvider>
+                <Switch>
-                  <Switch>
+                  <SentryRoute exact path="/">
-                    <SentryRoute exact path="/">
+                    <HomePage />
-                      <HomePage />
+                  </SentryRoute>
-                    </SentryRoute>
+                  <SentryRoute exact path="/login">
-                    <SentryRoute exact path="/login">
+                    <LoginPage />
-                      <LoginPage />
+                  </SentryRoute>
-                    </SentryRoute>
+                  <SentryRoute exact path="/register">
-                    <SentryRoute exact path="/register">
+                    <RegisterPage />
-                      <RegisterPage />
+                  </SentryRoute>
-                    </SentryRoute>
+                  <SentryRoute path="/room/:roomId?">
-                    <SentryRoute path="/room/:roomId?">
+                    <RoomPage />
-                      <RoomPage />
+                  </SentryRoute>
-                    </SentryRoute>
+                  <SentryRoute path="/inspector">
-                    <SentryRoute path="/inspector">
+                    <SequenceDiagramViewerPage />
-                      <SequenceDiagramViewerPage />
+                  </SentryRoute>
-                    </SentryRoute>
+                  <SentryRoute path="*">
-                    <SentryRoute path="*">
+                    <RoomRedirect />
-                      <RoomRedirect />
+                  </SentryRoute>
-                    </SentryRoute>
+                </Switch>
-                  </Switch>
+              </OverlayProvider>
-                </OverlayProvider>
+            </Sentry.ErrorBoundary>
-              </Sentry.ErrorBoundary>
+          </InspectorContextProvider>
-            </InspectorContextProvider>
+        </ClientProvider>
-          </ClientProvider>
+      </Suspense>
-        </Suspense>
-      ) : (
-        <LoadingView />
-      )}
     </Router>
   );
 }

src/matrix-utils.ts

@@ -18,6 +18,7 @@ import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
 import IndexedDBWorker from "./IndexedDBWorker?worker";
 import { getUrlParams } from "./UrlParams";
+import { loadOlm } from "./olm";
 
 export const defaultHomeserver =
   (import.meta.env.VITE_DEFAULT_HOMESERVER as string) ??
@@ -72,8 +73,9 @@ export async function initClient(
   clientOptions: ICreateClientOpts,
   restore: boolean
 ): Promise<MatrixClient> {
-  let indexedDB: IDBFactory;
+  await loadOlm();
 
+  let indexedDB: IDBFactory;
   try {
     indexedDB = window.indexedDB;
   } catch (e) {}

src/olm.ts

@@ -0,0 +1,29 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Olm from "@matrix-org/olm";
+import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
+
+// https://gitlab.matrix.org/matrix-org/olm/-/issues/10
+window.OLM_OPTIONS = {};
+
+let olmLoaded: Promise<void> | null = null;
+
+/**
+ * Loads Olm, if not already loaded.
+ */
+export const loadOlm = (): Promise<void> =>
+  (olmLoaded ??= Olm.init({ locateFile: () => olmWasmPath }));

test/mocks/olmMock.ts

@@ -0,0 +1 @@
+module.exports = { loadOlm: jest.fn(async () => {}) }