diff --git a/src/App.tsx b/src/App.tsx index d68e51c8..a81da418 100644 --- a/src/App.tsx +++ b/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,52 +39,58 @@ interface AppProps { } export default function App({ history }: AppProps) { - const [loadingOlm, setLoadingOlm] = useState(false); + const [olmLoaded, setOlmLoaded] = useState(false); usePageFocusStyle(); - // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10 - window.OLM_OPTIONS = {}; - Olm.init({ locateFile: () => olmWasmPath }).then(() => setLoadingOlm(false)); + 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 = ; - if (loadingOlm) { - return ; - } - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {olmLoaded ? ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) : ( + + )} ); }