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 1/2] 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>
       );
     }

From 4e01a3471772f0187dfc8ab0b7ea8d1b1ffb7055 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 29 Nov 2019 22:54:20 +0000
Subject: [PATCH 2/2] fix(ui): update outdated UIDefaults fields

---
 ui/src/App.tsx       | 2 +-
 ui/src/index.test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 7ed2e0a16..d16f02f2b 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -43,7 +43,7 @@ interface UIDefaults {
   Refresh: number;
   HideFiltersWhenIdle: boolean;
   ColorTitlebar: boolean;
-  DarkTheme: boolean;
+  Theme: "light" | "dark" | "auto";
   MinimalGroupWidth: number;
   AlertsPerGroup: number;
   CollapseGroups: "expanded" | "collapsed" | "collapsedOnMobile";
diff --git a/ui/src/index.test.js b/ui/src/index.test.js
index fd56ccb24..a48dc4984 100644
--- a/ui/src/index.test.js
+++ b/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", () => {