Merge pull request #674 from vector-im/SimonBrandner/fix/i-am-stupid-sometimes

Avoid Olm loading loop

src/App.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import Olm from "@matrix-org/olm";
 import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
-import React, { Suspense, useState } from "react";
+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";
@@ -39,22 +39,25 @@ interface AppProps {
 }
 
 export default function App({ history }: AppProps) {
-  const [loadingOlm, setLoadingOlm] = useState(false);
+  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(() => setLoadingOlm(false));
+      Olm.init({ locateFile: () => olmWasmPath }).then(() =>
+        setOlmLoaded(true)
+      );
+    }
+  }, [olmLoaded, setOlmLoaded]);
 
   const errorPage = <CrashView />;
 
-  if (loadingOlm) {
-    return <LoadingView />;
-  }
-
   return (
     <Router history={history}>
+      {olmLoaded ? (
         <Suspense fallback={null}>
           <ClientProvider>
             <InspectorContextProvider>
@@ -85,6 +88,9 @@ export default function App({ history }: AppProps) {
             </InspectorContextProvider>
           </ClientProvider>
         </Suspense>
+      ) : (
+        <LoadingView />
+      )}
     </Router>
   );
 }