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

12
web/components/ui/Header/Header.tsx
View File

@@ -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;