Lazy load more components. #2167

web/components/admin/EditInstanceDetails2.tsx

@@ -18,7 +18,9 @@ import { ResetYP } from './ResetYP';
 
 // Lazy loaded components
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+  ssr: false,
+});
 
 const { Panel } = Collapse;
 

web/components/admin/MainLayout.tsx

@@ -36,7 +36,9 @@ import FediverseIcon from '../../assets/images/fediverse-black.png';
 
 // Lazy loaded components
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+  ssr: false,
+});
 
 export type MainLayoutProps = {
   children: ReactNode;

web/components/admin/MessageVisiblityToggle.tsx

@@ -14,7 +14,9 @@ import { isEmptyObject } from '../../utils/format';
 
 // Lazy loaded components
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+  ssr: false,
+});
 
 export type MessageToggleProps = {
   isVisible: boolean;

web/components/admin/UserPopover.tsx

@@ -16,7 +16,9 @@ import { formatUAstring } from '../../utils/format';
 
 // Lazy loaded components
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+  ssr: false,
+});
 
 export type UserPopoverProps = {
   user: User;

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -14,7 +14,9 @@ import { User } from '../../../interfaces/user.model';
 
 // Lazy loaded components
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+  ssr: false,
+});
 
 const ChatModerationActionMenu = dynamic(() =>
   import('../ChatModerationActionMenu/ChatModerationActionMenu').then(

web/components/layouts/Main.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/no-unescaped-entities */
-import { Layout } from 'antd';
 import { useRecoilValue } from 'recoil';
 import Head from 'next/head';
 import { FC, useEffect, useRef } from 'react';
@@ -16,22 +15,36 @@ import { Header } from '../ui/Header/Header';
 import { ClientConfig } from '../../interfaces/client-config.model';
 import { DisplayableError } from '../../types/displayable-error';
 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 TitleNotifier = dynamic(
+  () => import('../TitleNotifier/TitleNotifier').then(mod => mod.TitleNotifier),
+  {
+    ssr: false,
+  },
+);
+
+const PushNotificationServiceWorker = dynamic(
+  () =>
+    import('../workers/PushNotificationServiceWorker/PushNotificationServiceWorker').then(
+      mod => mod.PushNotificationServiceWorker,
+    ),
+  {
+    ssr: false,
+  },
+);
+
 const FatalErrorStateModal = dynamic(
   () =>
     import('../modals/FatalErrorStateModal/FatalErrorStateModal').then(
       mod => mod.FatalErrorStateModal,
     ),
   {
-    loading: () => <div>Loading...</div>,
     ssr: false,
   },
 );
@@ -128,13 +141,13 @@ export const Main: FC = () => {
       <PushNotificationServiceWorker />
       <TitleNotifier name={name} />
       <Theme />
-      <Layout ref={layoutRef} style={{ minHeight: '100vh' }}>
+      <div ref={layoutRef} style={{ minHeight: '100vh' }}>
         <Header name={title || name} chatAvailable={isChatAvailable} chatDisabled={chatDisabled} />
         <Content />
         {fatalError && (
           <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
         )}
-      </Layout>
+      </div>
     </>
   );
 };

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Layout, Tabs, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
@@ -37,34 +37,60 @@ import { ExternalAction } from '../../../interfaces/external-action';
 import { Modal } from '../Modal/Modal';
 import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
 
-const { Content: AntContent } = Layout;
-
 // Lazy loaded components
 
-const FollowerCollection = dynamic(() =>
+const FollowerCollection = dynamic(
-  import('../followers/FollowerCollection/FollowerCollection').then(mod => mod.FollowerCollection),
+  () =>
+    import('../followers/FollowerCollection/FollowerCollection').then(
+      mod => mod.FollowerCollection,
+    ),
+  {
+    ssr: false,
+  },
 );
 
-const FollowModal = dynamic(() =>
+const FollowModal = dynamic(
-  import('../../modals/FollowModal/FollowModal').then(mod => mod.FollowModal),
+  () => import('../../modals/FollowModal/FollowModal').then(mod => mod.FollowModal),
+  {
+    ssr: false,
+  },
 );
 
-const BrowserNotifyModal = dynamic(() =>
+const BrowserNotifyModal = dynamic(
-  import('../../modals/BrowserNotifyModal/BrowserNotifyModal').then(mod => mod.BrowserNotifyModal),
+  () =>
+    import('../../modals/BrowserNotifyModal/BrowserNotifyModal').then(
+      mod => mod.BrowserNotifyModal,
+    ),
+  {
+    ssr: false,
+  },
 );
 
-const NotifyReminderPopup = dynamic(() =>
+const NotifyReminderPopup = dynamic(
-  import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup),
+  () => import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup),
+  {
+    ssr: false,
+  },
 );
 
-const OwncastPlayer = dynamic(() =>
+const OwncastPlayer = dynamic(
-  import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer),
+  () => import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer),
+  {
+    ssr: false,
+  },
 );
 
-const ChatContainer = dynamic(() =>
+const ChatContainer = dynamic(
-  import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
+  () => import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
+  {
+    ssr: false,
+  },
 );
 
+const Tabs = dynamic(() => import('antd').then(mod => mod.Tabs), {
+  ssr: false,
+});
+
 const DesktopContent = ({
   name,
   streamTitle,
@@ -301,7 +327,7 @@ export const Content: FC = () => {
   return (
     <>
       <div className={styles.main}>
-        <AntContent className={styles.root}>
+        <div className={styles.root}>
           <div className={styles.mainSection}>
             <div className={styles.topSection}>
               {appState.appLoading && <Skeleton loading active paragraph={{ rows: 7 }} />}
@@ -389,7 +415,7 @@ export const Content: FC = () => {
             <Footer version={version} />
           </div>
           {showChat && !isMobile && <Sidebar />}
-        </AntContent>
+        </div>
         {!isMobile && false && <Footer version={version} />}
       </div>
       {externalActionToDisplay && (

web/components/ui/Header/Header.tsx

@@ -1,19 +1,19 @@
-import { Layout, Tag } from 'antd';
+import { Tag } from 'antd';
 import { FC } from 'react';
 import cn from 'classnames';
 import dynamic from 'next/dynamic';
 import { OwncastLogo } from '../../common/OwncastLogo/OwncastLogo';
 import styles from './Header.module.scss';
 
-const { Header: AntHeader } = Layout;
-
 // Lazy loaded components
 
 const UserDropdown = dynamic(() =>
   import('../../common/UserDropdown/UserDropdown').then(mod => mod.UserDropdown),
 );
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+  ssr: false,
+});
 
 export type HeaderComponentProps = {
   name: string;
@@ -26,7 +26,7 @@ export const Header: FC<HeaderComponentProps> = ({
   chatAvailable,
   chatDisabled,
 }) => (
-  <AntHeader className={cn([`${styles.header}`], 'global-header')}>
+  <div className={cn([`${styles.header}`], 'global-header')}>
     <div className={styles.logo}>
       <div id="header-logo" className={styles.logoImage}>
         <OwncastLogo variant="contrast" />
@@ -41,6 +41,6 @@ export const Header: FC<HeaderComponentProps> = ({
         <Tag style={{ cursor: 'pointer' }}>Chat offline</Tag>
       </Tooltip>
     )}
-  </AntHeader>
+  </div>
 );
 export default Header;

web/pages/admin/access-tokens.tsx

@@ -16,7 +16,9 @@ const { Title, Paragraph } = Typography;
 
 // Lazy loaded components
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+  ssr: false,
+});
 
 const availableScopes = {
   CAN_SEND_SYSTEM_MESSAGES: {

web/pages/admin/webhooks.tsx

@@ -8,7 +8,9 @@ import { isValidUrl, DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
 
 // Lazy loaded components
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+  ssr: false,
+});
 
 const { Title, Paragraph } = Typography;