feat(ui): lazy load modals

This uses React code splitting to only load modal content components if they are used - all modal components will be loaded the first time user open a modal, rather than on initial page load
prymitive · Apr 26, 2019 · fbb5b86 · fbb5b86
1 parent 518a3d4
commit fbb5b86
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
diff --git a/ui/src/Components/MainModal/index.js b/ui/src/Components/MainModal/index.js
@@ -6,12 +6,19 @@ import { observable, action } from "mobx";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 import { Modal } from "Components/Modal";
-import { MainModalContent } from "./MainModalContent";
+
+// https://github.com/facebook/react/issues/14603
+const MainModalContent = React.lazy(() =>
+  import("./MainModalContent").then(module => ({
+    default: module.MainModalContent
+  }))
+);
 
 const MainModal = observer(
   class MainModal extends Component {
@@ -49,12 +56,20 @@ const MainModal = observer(
             </TooltipWrapper>
           </li>
           <Modal isOpen={this.toggle.show}>
-            <MainModalContent
-              alertStore={alertStore}
-              settingsStore={settingsStore}
-              onHide={this.toggle.hide}
-              isVisible={this.toggle.show}
-            />
+            <React.Suspense
+              fallback={
+                <h1 className="display-1 text-secondary p-5 m-auto">
+                  <FontAwesomeIcon icon={faSpinner} size="lg" spin />
+                </h1>
+              }
+            >
+              <MainModalContent
+                alertStore={alertStore}
+                settingsStore={settingsStore}
+                onHide={this.toggle.hide}
+                isVisible={this.toggle.show}
+              />
+            </React.Suspense>
           </Modal>
         </React.Fragment>
       );

diff --git a/ui/src/Components/SilenceModal/index.js b/ui/src/Components/SilenceModal/index.js
@@ -5,16 +5,23 @@ import { observer } from "mobx-react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
 
 import { AlertStore } from "Stores/AlertStore";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { Settings } from "Stores/Settings";
 import { Modal } from "Components/Modal";
 import { TooltipWrapper } from "Components/TooltipWrapper";
-import { SilenceModalContent } from "./SilenceModalContent";
 
 import "./index.css";
 
+// https://github.com/facebook/react/issues/14603
+const SilenceModalContent = React.lazy(() =>
+  import("./SilenceModalContent").then(module => ({
+    default: module.SilenceModalContent
+  }))
+);
+
 const SilenceModal = observer(
   class SilenceModal extends Component {
     static propTypes = {
@@ -42,12 +49,20 @@ const SilenceModal = observer(
             isOpen={silenceFormStore.toggle.visible}
             onExited={silenceFormStore.data.resetProgress}
           >
-            <SilenceModalContent
-              alertStore={alertStore}
-              silenceFormStore={silenceFormStore}
-              settingsStore={settingsStore}
-              onHide={silenceFormStore.toggle.hide}
-            />
+            <React.Suspense
+              fallback={
+                <h1 className="display-1 text-secondary p-5 m-auto">
+                  <FontAwesomeIcon icon={faSpinner} size="lg" spin />
+                </h1>
+              }
+            >
+              <SilenceModalContent
+                alertStore={alertStore}
+                silenceFormStore={silenceFormStore}
+                settingsStore={settingsStore}
+                onHide={silenceFormStore.toggle.hide}
+              />
+            </React.Suspense>
           </Modal>
         </React.Fragment>
       );