LogalDeveloper/owncast
0
Fork 0
Code Activity

Lazy load some components that aren't needed at load. For #2167

Browse Source
This commit is contained in:
Gabe Kangas
2022-10-03 21:06:46 -07:00
parent 4a999a39b2
commit b1484f4c9f
4 changed files with 51 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/chat/ChatTextField/ChatTextField.tsx
View File

@@ -4,12 +4,16 @@ import React, { FC, useMemo, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { Transforms, createEditor, BaseEditor, Text, Descendant, Editor, Node, Path } from 'slate';
import { Slate, Editable, withReact, ReactEditor, useSelected, useFocused } from 'slate-react';
import { EmojiPicker } from './EmojiPicker';
import dynamic from 'next/dynamic';
import WebsocketService from '../../../services/websocket-service';
import { websocketServiceAtom } from '../../stores/ClientConfigStore';
import { MessageType } from '../../../interfaces/socket-events';
import styles from './ChatTextField.module.scss';
// Lazy loaded components
const EmojiPicker = dynamic(() => import('./EmojiPicker').then(mod => mod.EmojiPicker));
type CustomElement = { type: 'paragraph' | 'span'; children: CustomText[] } | ImageNode;
type CustomText = { text: string };

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

@@ -1,18 +1,27 @@
/* eslint-disable react/no-danger */
import { FC, useEffect, useState } from 'react';
import { Highlight } from 'react-highlighter-ts';
import he from 'he';
import cn from 'classnames';
import { Tooltip } from 'antd';
import { LinkOutlined } from '@ant-design/icons';
import { useRecoilValue } from 'recoil';
import dynamic from 'next/dynamic';
import styles from './ChatUserMessage.module.scss';
import { formatTimestamp } from './messageFmt';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { ChatModerationActionMenu } from '../ChatModerationActionMenu/ChatModerationActionMenu';
import { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge';
import { accessTokenAtom } from '../../stores/ClientConfigStore';
// Lazy loaded components
const ChatModerationActionMenu = dynamic(() =>
import('../ChatModerationActionMenu/ChatModerationActionMenu').then(
mod => mod.ChatModerationActionMenu,
),
);
const Highlight = dynamic(() => import('react-highlighter-ts').then(mod => mod.Highlight));
export type ChatUserMessageProps = {
message: ChatMessage;
showModeratorMenu: boolean;