Move loader to react mobx (#759)

* move loader and initialization to react
* lazy load the terriajs so loader shows immediately
* rename files to minimize change scope
* restore some more changes
* mobx version

Author: zoran995

buildprocess/webpack.config.js

@@ -80,12 +80,6 @@ module.exports = function (devMode) {
             }
           }
         },
-        // handle css files - inject in html tag
-        {
-          test: /loader\.css$/,
-          include: [path.resolve(__dirname, "..", "lib", "Styles")],
-          use: ["style-loader", "css-loader"]
-        },
         // handle scss files
         {
           test: /\.scss$/,
@@ -100,6 +94,7 @@ module.exports = function (devMode) {
                 defaultExport: true
               }
             },
+            { loader: "terriajs-typings-for-css-modules-loader" },
             {
               loader: "css-loader",
               options: {

entry.js

@@ -1,32 +1,3 @@
-import globeGif from "./lib/Styles/globe.gif";
-import "./lib/Styles/loader.css";
+import { renderUi } from "./lib/Views/render";
 
-async function loadMainScript() {
-  return import("terriajs/lib/Core/prerequisites")
-    .then(() => import("./index"))
-    .then(({ default: terriaPromise }) => terriaPromise);
-}
-
-function createLoader() {
-  const loaderDiv = document.createElement("div");
-  loaderDiv.classList.add("loader-ui");
-  const loaderGif = document.createElement("img");
-  loaderGif.src = globeGif;
-  loaderDiv.appendChild(loaderGif);
-
-  loaderDiv.style.backgroundColor = "#383F4D";
-  document.body.appendChild(loaderDiv);
-
-  loadMainScript()
-    .catch((_err) => {
-      // Ignore errors and try to show the map anyway
-    })
-    .then(() => {
-      loaderDiv.classList.add("loader-ui-hide");
-      setTimeout(() => {
-        document.body.removeChild(loaderDiv);
-      }, 2000);
-    });
-}
-
-createLoader();
+renderUi();

index.js

@@ -9,7 +9,6 @@ import registerCustomComponentTypes from "terriajs/lib/ReactViews/Custom/registe
 import updateApplicationOnHashChange from "terriajs/lib/ViewModels/updateApplicationOnHashChange";
 import updateApplicationOnMessageFromParentWindow from "terriajs/lib/ViewModels/updateApplicationOnMessageFromParentWindow";
 import loadPlugins from "./lib/Core/loadPlugins";
-import render from "./lib/Views/render";
 import showGlobalDisclaimer from "./lib/Views/showGlobalDisclaimer";
 import plugins from "./plugins";
 
@@ -97,10 +96,11 @@ export default terria
         styleSheet.innerText = fontImports;
         document.head.appendChild(styleSheet);
       }
-
-      render(terria, [], viewState);
     } catch (e) {
       console.error(e);
       console.error(e.stack);
     }
+  })
+  .then(() => {
+    return { terria, viewState };
   });

lib/Views/Loader.tsx

@@ -0,0 +1,15 @@
+import globeGif from "../Styles/globe.gif";
+import Styles from "./loader.scss";
+
+export const Loader = () => {
+  return (
+    <div
+      className={Styles.loaderUi}
+      style={{
+        backgroundColor: "#383F4D"
+      }}
+    >
+      <img src={globeGif} />
+    </div>
+  );
+};

lib/Views/UserInterface.jsx

@@ -1,22 +1,22 @@
 import PropTypes from "prop-types";
-import React from "react";
 import RelatedMaps from "terriajs/lib/ReactViews/RelatedMaps/RelatedMaps";
-import {
-  ExperimentalMenu,
-  MenuLeft
-} from "terriajs/lib/ReactViews/StandardUserInterface/customizable/Groups";
+import { MenuLeft } from "terriajs/lib/ReactViews/StandardUserInterface/customizable/Groups";
 import MenuItem from "terriajs/lib/ReactViews/StandardUserInterface/customizable/MenuItem";
 import StandardUserInterface from "terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface";
 import version from "../../version";
-import "./global.scss";
 
-export default function UserInterface(props) {
-  const relatedMaps = props.viewState.terria.configParameters.relatedMaps;
+export const TerriaUserInterface = ({ terria, viewState, themeOverrides }) => {
+  const relatedMaps = viewState.terria.configParameters.relatedMaps;
   const aboutButtonHrefUrl =
-    props.viewState.terria.configParameters.aboutButtonHrefUrl;
+    viewState.terria.configParameters.aboutButtonHrefUrl;
 
   return (
-    <StandardUserInterface {...props} version={version}>
+    <StandardUserInterface
+      terria={terria}
+      viewState={viewState}
+      themeOverrides={themeOverrides}
+      version={version}
+    >
       <MenuLeft>
         {aboutButtonHrefUrl ? (
           <MenuItem
@@ -29,12 +29,12 @@ export default function UserInterface(props) {
           <RelatedMaps relatedMaps={relatedMaps} />
         ) : null}
       </MenuLeft>
-      <ExperimentalMenu />
     </StandardUserInterface>
   );
-}
+};
 
-UserInterface.propTypes = {
-  terria: PropTypes.object,
-  viewState: PropTypes.object
+TerriaUserInterface.propTypes = {
+  terria: PropTypes.object.isRequired,
+  viewState: PropTypes.object.isRequired,
+  themeOverrides: PropTypes.object
 };

lib/Views/global.scss.d.ts

@@ -0,0 +1,17 @@
+declare namespace GlobalScssNamespace {
+  export interface IGlobalScss {
+    rcSliderTooltipZoomDownIn: string;
+    rcSliderTooltipZoomDownOut: string;
+    "react-datepicker__month--selecting-range": string;
+    "react-datepicker__year--selecting-range": string;
+    reactDatepickerMonthSelectingRange: string;
+    reactDatepickerYearSelectingRange: string;
+  }
+}
+
+declare const GlobalScssModule: GlobalScssNamespace.IGlobalScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: GlobalScssNamespace.IGlobalScss;
+};
+
+export = GlobalScssModule;

lib/Styles/loader.css renamed to lib/Views/loader.scss

@@ -0,0 +1,15 @@
+declare namespace LoaderScssNamespace {
+  export interface ILoaderScss {
+    "loader-ui": string;
+    "loader-ui-hide": string;
+    loaderUi: string;
+    loaderUiHide: string;
+  }
+}
+
+declare const LoaderScssModule: LoaderScssNamespace.ILoaderScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: LoaderScssNamespace.ILoaderScss;
+};
+
+export = LoaderScssModule;

lib/Views/loader.scss.d.ts

@@ -1,21 +1,48 @@
+import { observer } from "mobx-react";
+import PropTypes from "prop-types";
+import React, { Suspense } from "react";
 import { createRoot } from "react-dom/client";
-import { flushSync } from "react-dom";
 import Variables from "../Styles/variables.scss";
-import UI from "./UserInterface";
+import "./global.scss";
+import { Loader } from "./Loader";
+import { terriaStore } from "./terriaStore";
 
-export default function renderUi(terria, allBaseMaps, viewState) {
-  const container = document.getElementById("ui");
-  const root = createRoot(container);
+// Lazy load the entire TerriaUserInterface component
+const LazyTerriaUserInterface = React.lazy(() =>
+  import("./UserInterface").then((module) => ({
+    default: module.TerriaUserInterface
+  }))
+);
+
+const Root = observer(({ themeOverrides }) => {
+  const { terria, viewState, status } = terriaStore;
 
-  // Ensure that the initial render is synchronous so there is no a white flash visible between loading and rendering
-  flushSync(() =>
-    root.render(
-      <UI
+  if (status === "loading") {
+    return <Loader />;
+  }
+
+  return (
+    <Suspense fallback={<Loader />}>
+      <LazyTerriaUserInterface
         terria={terria}
-        allBaseMaps={allBaseMaps}
         viewState={viewState}
-        themeOverrides={Variables}
+        themeOverrides={themeOverrides}
       />
-    )
+    </Suspense>
   );
-}
+});
+
+Root.propTypes = {
+  themeOverrides: PropTypes.object
+};
+
+export const renderUi = () => {
+  const container = document.getElementById("ui");
+  if (!container) {
+    console.error("Container element with id 'ui' not found.");
+    return;
+  }
+
+  const root = createRoot(container);
+  root.render(<Root themeOverrides={Variables} />);
+};

lib/Views/render.jsx

@@ -0,0 +1,39 @@
+import { makeObservable, observable, action } from "mobx";
+import type Terria from "terriajs/lib/Models/Terria";
+import type ViewState from "terriajs/lib/ReactViewModels/ViewState";
+
+class TerriaStore {
+  terria: Terria | undefined = undefined;
+  viewState: ViewState | undefined = undefined;
+  status: "loading" | "ready" = "loading";
+
+  constructor() {
+    makeObservable(this, {
+      terria: observable,
+      viewState: observable,
+      status: observable,
+      setReady: action
+    });
+
+    this.init();
+  }
+
+  async init() {
+    //@ts-expect-error: need to convert to TS
+    await import("terriajs/lib/Core/prerequisites");
+
+    const { terria, viewState } = await import("../../index.js").then(
+      (module) => module.default
+    );
+
+    this.setReady(terria, viewState);
+  }
+
+  setReady(terria: Terria, viewState: ViewState) {
+    this.terria = terria;
+    this.viewState = viewState;
+    this.status = "ready";
+  }
+}
+
+export const terriaStore = new TerriaStore();