Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
10 changed files with 89 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/admin/EditInstanceDetails2.tsx
View File

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

4
web/components/admin/MainLayout.tsx
View File

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

4
web/components/admin/MessageVisiblityToggle.tsx
View File

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

4
web/components/admin/UserPopover.tsx
View File

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

4
web/components/chat/ChatUserMessage/ChatUserMessage.tsx
View File

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

25
web/components/layouts/Main.tsx
View File

@ -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>
</>
);
};

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;

4
web/pages/admin/access-tokens.tsx
View File

@ -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: {

4
web/pages/admin/webhooks.tsx
View File

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