Use built-in Next layout support + lazy load

Instead of doing manual layout switching use the Nextjs nested layout
support. Also add some additional lazy loading of components. This is to
work on performance score re: #2167.

web/components/layouts/AdminLayout.tsx

@@ -1,37 +0,0 @@
-/* eslint-disable @next/next/no-css-tags */
-import { AppProps } from 'next/app';
-import { FC } from 'react';
-import ServerStatusProvider from '../../utils/server-status-context';
-import AlertMessageProvider from '../../utils/alert-message-context';
-import { MainLayout } from '../MainLayout';
-
-/*
-NOTE: A bunch of compiled css is loaded here for the Admin UI.
-These are old stylesheets that were converted from sass and should not be
-edited or maintained. Instead we are using css modules everywhere. So if you
-need to change a style rewrite the css file as a css module and import it
-into the component that needs it, removing it from this global list.
-*/
-export const AdminLayout: FC<AppProps> = ({ Component, pageProps }) => (
-  <>
-    <link rel="stylesheet" href="/styles/admin/main-layout.css" />
-    <link rel="stylesheet" href="/styles/admin/form-textfields.css" />
-    <link rel="stylesheet" href="/styles/admin/config-socialhandles.css" />
-    <link rel="stylesheet" href="/styles/admin/config-storage.css" />
-    <link rel="stylesheet" href="/styles/admin/config-edit-string-tags.css" />
-    <link rel="stylesheet" href="/styles/admin/config-video-variants.css" />
-    <link rel="stylesheet" href="/styles/admin/config-public-details.css" />
-    <link rel="stylesheet" href="/styles/admin/home.css" />
-    <link rel="stylesheet" href="/styles/admin/chat.css" />
-    <link rel="stylesheet" href="/styles/admin/pages.css" />
-    <link rel="stylesheet" href="/styles/admin/offline-notice.css" />
-
-    <ServerStatusProvider>
-      <AlertMessageProvider>
-        <MainLayout>
-          <Component {...pageProps} />
-        </MainLayout>
-      </AlertMessageProvider>
-    </ServerStatusProvider>
-  </>
-);

web/components/layouts/Main.tsx

@@ -5,23 +5,37 @@ import { useRecoilValue } from 'recoil';
 import Head from 'next/head';
 import { FC, useEffect, useRef } from 'react';
 import { useLockBodyScroll } from 'react-use';
+import dynamic from 'next/dynamic';
 import {
   ClientConfigStore,
   isChatAvailableSelector,
   clientConfigStateAtom,
   fatalErrorStateAtom,
 } from '../stores/ClientConfigStore';
-import { Content } from '../ui/Content/Content';
 import { Header } from '../ui/Header/Header';
 import { ClientConfig } from '../../interfaces/client-config.model';
 import { DisplayableError } from '../../types/displayable-error';
-import { FatalErrorStateModal } from '../modals/FatalErrorStateModal/FatalErrorStateModal';
 import setupNoLinkReferrer from '../../utils/no-link-referrer';
 import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
 import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
+import { PushNotificationServiceWorker } from '../workers/PushNotificationServiceWorker/PushNotificationServiceWorker';
+import { Content } from '../ui/Content/Content';
 
 import { Theme } from '../theme/Theme';
 
+// Lazy loaded components
+
+const FatalErrorStateModal = dynamic(
+  () =>
+    import('../modals/FatalErrorStateModal/FatalErrorStateModal').then(
+      mod => mod.FatalErrorStateModal,
+    ),
+  {
+    loading: () => <div>Loading...</div>,
+    ssr: false,
+  },
+);
+
 export const Main: FC = () => {
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const { name, title, customStyles } = clientConfig;
@@ -111,6 +125,7 @@ export const Main: FC = () => {
       )}
 
       <ClientConfigStore />
+      <PushNotificationServiceWorker />
       <TitleNotifier name={name} />
       <Theme />
       <Layout ref={layoutRef} style={{ minHeight: '100vh' }}>

web/components/layouts/SimpleLayout.tsx

@@ -1,8 +0,0 @@
-import { AppProps } from 'next/app';
-import { FC } from 'react';
-
-export const SimpleLayout: FC<AppProps> = ({ Component, pageProps }) => (
-  <div>
-    <Component {...pageProps} />
-  </div>
-);

web/components/workers/PushNotificationServiceWorker/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

web/components/workers/PushNotificationServiceWorker/PushNotificationServiceWorker.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/no-danger */
+import { FC, useEffect } from 'react';
+
+export const PushNotificationServiceWorker: FC = () => {
+  const add = () => {
+    navigator.serviceWorker.register('/serviceWorker.js').then(
+      registration => {
+        console.debug('Service Worker registration successful with scope: ', registration.scope);
+      },
+      err => {
+        console.error('Service Worker registration failed: ', err);
+      },
+    );
+  };
+
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', add);
+    }
+
+    return () => {
+      window.removeEventListener('load', add);
+    };
+  }, []);
+
+  return null;
+};