LogalDeveloper/owncast
0
Fork 0
Code Activity

Lazy load more components. #2167

Browse Source
This commit is contained in:
Gabe Kangas
2023-01-09 23:58:41 -08:00
parent 7392ae8a54
commit cfaeda94b0
10 changed files with 89 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
web/components/ui/Content/Content.tsx
View File

@@ -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 (
<>
<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 && (