Merge pull request #1200 from prymitive/bundle

feat(ui): lazy load more modules

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,12 +28,22 @@ 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;
   HideFiltersWhenIdle: boolean;
   ColorTitlebar: boolean;
-  DarkTheme: boolean;
+  Theme: "light" | "dark" | "auto";
   MinimalGroupWidth: number;
   AlertsPerGroup: number;
   CollapseGroups: "expanded" | "collapsed" | "collapsedOnMobile";
@@ -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>
       );
     }

ui/src/index.test.js

@@ -34,7 +34,7 @@ it("renders without crashing with missing defaults div", () => {
   fetch.mockResponse(JSON.stringify(response));
   const Index = require("./index.tsx");
   expect(Index).toBeTruthy();
-  expect(root.innerHTML).toMatch(/data-filters="foo=bar bar=~baz"/);
+  expect(root.innerHTML).toMatch(/data-theme="auto"/);
 });
 
 it("renders without crashing with defaults present", () => {