Lazy load every instance of using ant icons. Closes #2583

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -1,6 +1,6 @@
 import { Virtuoso } from 'react-virtuoso';
 import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react';
-import { EditFilled } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import {
   ConnectedClientInfoEvent,
   MessageType,
@@ -17,6 +17,11 @@ import { ChatJoinMessage } from '../ChatJoinMessage/ChatJoinMessage';
 import { ScrollToBotBtn } from './ScrollToBotBtn';
 import { ChatActionMessage } from '../ChatActionMessage/ChatActionMessage';
 
+// Lazy loaded components
+
+const EditFilled = dynamic(() => import('@ant-design/icons/EditFilled'), {
+  ssr: false,
+});
 export type ChatContainerProps = {
   messages: ChatMessage[];
   usernameToHighlight: string;

web/components/chat/ChatContainer/ScrollToBotBtn.tsx

@@ -1,9 +1,17 @@
-import { VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
+import dynamic from 'next/dynamic';
 import { FC, MutableRefObject } from 'react';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import styles from './ChatContainer.module.scss';
 
+// Lazy loaded components
+
+const VerticalAlignBottomOutlined = dynamic(
+  () => import('@ant-design/icons/VerticalAlignBottomOutlined'),
+  {
+    ssr: false,
+  },
+);
 type Props = {
   chatContainerRef: MutableRefObject<any>;
   messages: ChatMessage[];

web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx

@@ -1,8 +1,14 @@
 import { FC } from 'react';
-import { TeamOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge';
 import styles from './ChatJoinMessage.module.scss';
 
+// Lazy loaded components
+
+const TeamOutlined = dynamic(() => import('@ant-design/icons/TeamOutlined'), {
+  ssr: false,
+});
+
 export type ChatJoinMessageProps = {
   isAuthorModerator: boolean;
   userColor: number;

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx

@@ -1,11 +1,6 @@
-import {
-  CloseCircleOutlined,
-  ExclamationCircleOutlined,
-  EyeInvisibleOutlined,
-  SmallDashOutlined,
-} from '@ant-design/icons';
 import { Dropdown, Menu, MenuProps, Space, message, Modal as AntModal } from 'antd';
 import { FC, useState } from 'react';
+import dynamic from 'next/dynamic';
 import { Modal } from '../../ui/Modal/Modal';
 import { ChatModerationDetailsModal } from '../ChatModerationDetailsModal/ChatModerationDetailsModal';
 import styles from './ChatModerationActionMenu.module.scss';
@@ -13,6 +8,27 @@ import ChatModeration from '../../../services/moderation-service';
 
 const { confirm } = AntModal;
 
+// Lazy loaded components
+
+const CloseCircleOutlined = dynamic(() => import('@ant-design/icons/CloseCircleOutlined'), {
+  ssr: false,
+});
+
+const ExclamationCircleOutlined = dynamic(
+  () => import('@ant-design/icons/ExclamationCircleOutlined'),
+  {
+    ssr: false,
+  },
+);
+
+const EyeInvisibleOutlined = dynamic(() => import('@ant-design/icons/EyeInvisibleOutlined'), {
+  ssr: false,
+});
+
+const SmallDashOutlined = dynamic(() => import('@ant-design/icons/SmallDashOutlined'), {
+  ssr: false,
+});
+
 export type ChatModerationActionMenuProps = {
   accessToken: string;
   messageID: string;

web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.tsx

@@ -1,14 +1,20 @@
 import { Button, Col, Collapse, Row, Spin, Table, Tag } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import format from 'date-fns/format';
-import { DeleteOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/lib/table';
+import dynamic from 'next/dynamic';
 import ChatModeration from '../../../services/moderation-service';
 import styles from './ChatModerationDetailsModal.module.scss';
 import { formatUAstring } from '../../../utils/format';
 
 const { Panel } = Collapse;
 
+// Lazy loaded components
+
+const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+  ssr: false,
+});
+
 export type ChatModerationDetailsModalProps = {
   userId: string;
   accessToken: string;

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -1,4 +1,3 @@
-import { SendOutlined, SmileOutlined } from '@ant-design/icons';
 import { Popover } from 'antd';
 import React, { FC, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
@@ -17,6 +16,14 @@ const EmojiPicker = dynamic(() => import('./EmojiPicker').then(mod => mod.EmojiP
   ssr: false,
 });
 
+const SendOutlined = dynamic(() => import('@ant-design/icons/SendOutlined'), {
+  ssr: false,
+});
+
+const SmileOutlined = dynamic(() => import('@ant-design/icons/SmileOutlined'), {
+  ssr: false,
+});
+
 type CustomElement = { type: 'paragraph' | 'span'; children: CustomText[] } | ImageNode;
 type CustomText = { text: string };
 

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-danger */
 import { FC, ReactNode, useEffect, useState } from 'react';
 import cn from 'classnames';
-import { LinkOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { useRecoilValue } from 'recoil';
 import dynamic from 'next/dynamic';
@@ -15,6 +14,10 @@ import { User } from '../../../interfaces/user.model';
 
 // Lazy loaded components
 
+const LinkOutlined = dynamic(() => import('@ant-design/icons/LinkOutlined'), {
+  ssr: false,
+});
+
 const ChatModerationActionMenu = dynamic(
   () =>
     import('../ChatModerationActionMenu/ChatModerationActionMenu').then(