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/pages/_app.tsx

@@ -11,41 +11,25 @@ import '../styles/ant-overrides.scss';
 import '../components/video/VideoJS/VideoJS.scss';
 
 import { AppProps } from 'next/app';
-import { Router, useRouter } from 'next/router';
-
+import { ReactElement, ReactNode } from 'react';
+import { NextPage } from 'next';
 import { RecoilRoot } from 'recoil';
-import { useEffect } from 'react';
-import { AdminLayout } from '../components/layouts/AdminLayout';
-import { SimpleLayout } from '../components/layouts/SimpleLayout';
 
-const App = ({ Component, pageProps }: AppProps) => {
-  useEffect(() => {
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', () => {
-        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);
-          },
-        );
-      });
-    }
-  }, []);
-
-  const router = useRouter() as Router;
-  if (router.pathname.startsWith('/admin')) {
-    return <AdminLayout pageProps={pageProps} Component={Component} router={router} />;
-  }
-  return (
-    <RecoilRoot>
-      <SimpleLayout pageProps={pageProps} Component={Component} router={router} />
-    </RecoilRoot>
-  );
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
 };
 
-export default App;
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+export default function App({ Component, pageProps }: AppPropsWithLayout) {
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? (page => page);
+
+  return getLayout(
+    <RecoilRoot>
+      <Component {...pageProps} />
+    </RecoilRoot>,
+  );
+}

web/pages/admin/index.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useContext } from 'react';
+/* eslint-disable @next/next/no-css-tags */
+import React, { useState, useEffect, useContext, ReactElement } from 'react';
 import { Skeleton, Card, Statistic, Row, Col } from 'antd';
 import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { formatDistanceToNow, formatRelative } from 'date-fns';
-import { ServerStatusContext } from '../../utils/server-status-context';
+import ServerStatusProvider, { ServerStatusContext } from '../../utils/server-status-context';
 import { LogTable } from '../../components/LogTable';
 import { Offline } from '../../components/Offline';
 import { StreamHealthOverview } from '../../components/StreamHealthOverview';
@@ -11,6 +12,9 @@ import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../../utils/apis';
 import { formatIPAddress, isEmptyObject } from '../../utils/format';
 import { NewsFeed } from '../../components/NewsFeed';
 
+import AlertMessageProvider from '../../utils/alert-message-context';
+import { MainLayout } from '../../components/MainLayout';
+
 function streamDetailsFormatter(streamDetails) {
   return (
     <ul className="statistics-list">
@@ -178,3 +182,27 @@ export default function Home() {
     </div>
   );
 }
+
+Home.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <>
+      <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>{page}</MainLayout>
+        </AlertMessageProvider>
+      </ServerStatusProvider>
+    </>
+  );
+};

web/pages/index.tsx

@@ -1,5 +1,9 @@
+import { ReactElement } from 'react';
 import { Main } from '../components/layouts/Main';
 
 export default function Home() {
   return <Main />;
 }
+Home.getLayout = function getLayout(page: ReactElement) {
+  return page;
+};