LogalDeveloper/owncast
0
Fork 0
Code Activity

Lazy load chat container

Browse Source
This commit is contained in:
Gabe Kangas
2022-10-27 23:47:15 -07:00
parent 6564fc69bf
commit d91f682d21
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,8 +55,6 @@ const OwncastPlayer = dynamic(() =>
import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer), import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer),
); );
// We only need to load the chat container here if we're in mobile or narrow
// windows, so lazy loading it makes sense.
const ChatContainer = dynamic(() => const ChatContainer = dynamic(() =>
import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer), import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
); );

7
web/components/ui/Sidebar/Sidebar.tsx
View File

@@ -1,12 +1,17 @@
import Sider from 'antd/lib/layout/Sider'; import Sider from 'antd/lib/layout/Sider';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { FC } from 'react'; import { FC } from 'react';
import dynamic from 'next/dynamic';
import { ChatMessage } from '../../../interfaces/chat-message.model'; import { ChatMessage } from '../../../interfaces/chat-message.model';
import { ChatContainer } from '../../chat/ChatContainer/ChatContainer';
import styles from './Sidebar.module.scss'; import styles from './Sidebar.module.scss';
import { currentUserAtom, visibleChatMessagesSelector } from '../../stores/ClientConfigStore'; import { currentUserAtom, visibleChatMessagesSelector } from '../../stores/ClientConfigStore';
// Lazy loaded components
const ChatContainer = dynamic(() =>
import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
);
export const Sidebar: FC = () => { export const Sidebar: FC = () => {
const currentUser = useRecoilValue(currentUserAtom); const currentUser = useRecoilValue(currentUserAtom);
const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector); const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);

3
web/next.config.js
View File

@@ -7,9 +7,6 @@ module.exports = withBundleAnalyzer(
withLess({ withLess({
trailingSlash: true, trailingSlash: true,
reactStrictMode: true, reactStrictMode: true,
experimental: {
webVitalsAttribution: ['CLS', 'LCP'],
},
webpack(config) { webpack(config) {
config.module.rules.push({ config.module.rules.push({
test: /\.svg$/i, test: /\.svg$/i,