From cfaeda94b0c01796750434362fb71317a192fd9d Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Mon, 9 Jan 2023 23:58:41 -0800 Subject: [PATCH] Lazy load more components. #2167 --- web/components/admin/EditInstanceDetails2.tsx | 4 +- web/components/admin/MainLayout.tsx | 4 +- .../admin/MessageVisiblityToggle.tsx | 4 +- web/components/admin/UserPopover.tsx | 4 +- .../chat/ChatUserMessage/ChatUserMessage.tsx | 4 +- web/components/layouts/Main.tsx | 25 ++++++-- web/components/ui/Content/Content.tsx | 60 +++++++++++++------ web/components/ui/Header/Header.tsx | 12 ++-- web/pages/admin/access-tokens.tsx | 4 +- web/pages/admin/webhooks.tsx | 4 +- 10 files changed, 89 insertions(+), 36 deletions(-) diff --git a/web/components/admin/EditInstanceDetails2.tsx b/web/components/admin/EditInstanceDetails2.tsx index 5679c8fdb..74103e789 100644 --- a/web/components/admin/EditInstanceDetails2.tsx +++ b/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; diff --git a/web/components/admin/MainLayout.tsx b/web/components/admin/MainLayout.tsx index 404a52b83..c34e6af64 100644 --- a/web/components/admin/MainLayout.tsx +++ b/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; diff --git a/web/components/admin/MessageVisiblityToggle.tsx b/web/components/admin/MessageVisiblityToggle.tsx index 3f576db71..4ed1c697f 100644 --- a/web/components/admin/MessageVisiblityToggle.tsx +++ b/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; diff --git a/web/components/admin/UserPopover.tsx b/web/components/admin/UserPopover.tsx index 02defc66c..673888865 100644 --- a/web/components/admin/UserPopover.tsx +++ b/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; diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx index 26b032a13..e4f3585ba 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx +++ b/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( diff --git a/web/components/layouts/Main.tsx b/web/components/layouts/Main.tsx index 9db67742b..e79a4f8b6 100644 --- a/web/components/layouts/Main.tsx +++ b/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: () =>
Loading...
, ssr: false, }, ); @@ -128,13 +141,13 @@ export const Main: FC = () => { - +
{fatalError && ( )} - +
); }; diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index e9d5615c8..d2d9dc200 100644 --- a/web/components/ui/Content/Content.tsx +++ b/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(() => - import('../followers/FollowerCollection/FollowerCollection').then(mod => mod.FollowerCollection), +const FollowerCollection = dynamic( + () => + import('../followers/FollowerCollection/FollowerCollection').then( + mod => mod.FollowerCollection, + ), + { + ssr: false, + }, ); -const FollowModal = dynamic(() => - import('../../modals/FollowModal/FollowModal').then(mod => mod.FollowModal), +const FollowModal = dynamic( + () => import('../../modals/FollowModal/FollowModal').then(mod => mod.FollowModal), + { + ssr: false, + }, ); -const BrowserNotifyModal = dynamic(() => - import('../../modals/BrowserNotifyModal/BrowserNotifyModal').then(mod => mod.BrowserNotifyModal), +const BrowserNotifyModal = dynamic( + () => + import('../../modals/BrowserNotifyModal/BrowserNotifyModal').then( + mod => mod.BrowserNotifyModal, + ), + { + ssr: false, + }, ); -const NotifyReminderPopup = dynamic(() => - import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup), +const NotifyReminderPopup = dynamic( + () => import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup), + { + ssr: false, + }, ); -const OwncastPlayer = dynamic(() => - import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer), +const OwncastPlayer = dynamic( + () => import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer), + { + ssr: false, + }, ); -const ChatContainer = dynamic(() => - import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer), +const ChatContainer = dynamic( + () => 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 ( <>
- +
{appState.appLoading && } @@ -389,7 +415,7 @@ export const Content: FC = () => {
{showChat && !isMobile && } - +
{!isMobile && false &&
}
{externalActionToDisplay && ( diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx index a85df0998..fe8c36643 100644 --- a/web/components/ui/Header/Header.tsx +++ b/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 = ({ chatAvailable, chatDisabled, }) => ( - +
); export default Header; diff --git a/web/pages/admin/access-tokens.tsx b/web/pages/admin/access-tokens.tsx index 27220a059..473e85118 100644 --- a/web/pages/admin/access-tokens.tsx +++ b/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: { diff --git a/web/pages/admin/webhooks.tsx b/web/pages/admin/webhooks.tsx index be16e41f5..022b0435e 100644 --- a/web/pages/admin/webhooks.tsx +++ b/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;