From 43b1734fa02adc277ea2d903680216177768d808 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 29 Nov 2019 22:50:04 +0000
Subject: [PATCH] feat(ui): lazy load more modules

---
 ui/src/App.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index c6ae949d3..7ed2e0a16 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -7,8 +7,6 @@ import Media from "react-media";
 import { AlertStore, DecodeLocationSearch } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
-import { Fetcher } from "Components/Fetcher";
-import { FaviconBadge } from "Components/FaviconBadge";
 import {
   ReactSelectColors,
   ReactSelectStyles
@@ -30,6 +28,16 @@ const NavBar = React.lazy(() =>
     default: module.NavBar
   }))
 );
+const Fetcher = React.lazy(() =>
+  import("Components/Fetcher").then(module => ({
+    default: module.Fetcher
+  }))
+);
+const FaviconBadge = React.lazy(() =>
+  import("Components/FaviconBadge").then(module => ({
+    default: module.FaviconBadge
+  }))
+);
 
 interface UIDefaults {
   Refresh: number;
@@ -137,8 +145,6 @@ const App = observer(
                     settingsStore={this.settingsStore}
                     silenceFormStore={this.silenceFormStore}
                   />
-                </React.Suspense>
-                <React.Suspense fallback={null}>
                   <Grid
                     alertStore={this.alertStore}
                     settingsStore={this.settingsStore}
@@ -148,11 +154,13 @@ const App = observer(
               </ThemeContext.Provider>
             )}
           </Media>
-          <FaviconBadge alertStore={this.alertStore} />
-          <Fetcher
-            alertStore={this.alertStore}
-            settingsStore={this.settingsStore}
-          />
+          <React.Suspense fallback={null}>
+            <FaviconBadge alertStore={this.alertStore} />
+            <Fetcher
+              alertStore={this.alertStore}
+              settingsStore={this.settingsStore}
+            />
+          </React.Suspense>
         </ErrorBoundary>
       );
     }