Lazy load chat container

web/components/ui/Content/Content.tsx

@@ -55,8 +55,6 @@ const OwncastPlayer = dynamic(() =>
   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(() =>
   import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
 );

web/components/ui/Sidebar/Sidebar.tsx

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

web/next.config.js

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