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

web/components/admin/BanUserButton.tsx

@@ -1,9 +1,23 @@
 import { Modal, Button } from 'antd';
-import { ExclamationCircleFilled, QuestionCircleFilled, StopTwoTone } from '@ant-design/icons';
 import { FC } from 'react';
+import dynamic from 'next/dynamic';
 import { USER_ENABLED_TOGGLE, fetchData } from '../../utils/apis';
 import { User } from '../../types/chat';
 
+// Lazy loaded components
+
+const ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {
+  ssr: false,
+});
+
+const QuestionCircleFilled = dynamic(() => import('@ant-design/icons/QuestionCircleFilled'), {
+  ssr: false,
+});
+
+const StopTwoTone = dynamic(() => import('@ant-design/icons/StopTwoTone'), {
+  ssr: false,
+});
+
 export type BanUserButtonProps = {
   user: User;
   isEnabled: Boolean; // = this user's current status

web/components/admin/BannedIPsTable.tsx

@@ -2,10 +2,16 @@ import { Table, Button } from 'antd';
 import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
 import React, { FC } from 'react';
-import { StopTwoTone } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { User } from '../../types/chat';
 import { BANNED_IP_REMOVE, fetchData } from '../../utils/apis';
 
+// Lazy loaded components
+
+const StopTwoTone = dynamic(() => import('@ant-design/icons/StopTwoTone'), {
+  ssr: false,
+});
+
 function formatDisplayDate(date: string | Date) {
   return format(new Date(date), 'MMM d H:mma');
 }

web/components/admin/ClientTable.tsx

@@ -1,14 +1,20 @@
 import { Input, Table } from 'antd';
 import { FilterDropdownProps, SortOrder } from 'antd/lib/table/interface';
 import { ColumnsType } from 'antd/es/table';
-import { SearchOutlined } from '@ant-design/icons';
 import { formatDistanceToNow } from 'date-fns';
 import { FC } from 'react';
+import dynamic from 'next/dynamic';
 import { Client } from '../../types/chat';
 import { UserPopover } from './UserPopover';
 import { BanUserButton } from './BanUserButton';
 import { formatUAstring } from '../../utils/format';
 
+// Lazy loaded components
+
+const SearchOutlined = dynamic(() => import('@ant-design/icons/SearchOutlined'), {
+  ssr: false,
+});
+
 export type ClientTableProps = {
   data: Client[];
 };

web/components/admin/CurrentVariantsTable.tsx

@@ -3,7 +3,7 @@
 import React, { FC, useContext, useState } from 'react';
 import { Typography, Table, Modal, Button, Alert } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { DeleteOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { AlertMessageContext } from '../../utils/alert-message-context';
 import { UpdateArgs, VideoVariant } from '../../types/config-section';
@@ -28,6 +28,12 @@ import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
+// Lazy loaded components
+
+const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+  ssr: false,
+});
+
 // eslint-disable-next-line import/prefer-default-export
 export const CurrentVariantsTable: FC = () => {
   const [displayModal, setDisplayModal] = useState(false);

web/components/admin/EditInstanceDetails2.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { Button, Collapse, Typography, Tooltip } from 'antd';
-import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD, TEXTFIELD_TYPE_URL } from './TextField';
 import { TextFieldWithSubmit } from './TextFieldWithSubmit';
 import { ServerStatusContext } from '../../utils/server-status-context';
@@ -17,6 +17,14 @@ import { ResetYP } from './ResetYP';
 
 // Lazy loaded components
 
+const CopyOutlined = dynamic(() => import('@ant-design/icons/CopyOutlined'), {
+  ssr: false,
+});
+
+const RedoOutlined = dynamic(() => import('@ant-design/icons/RedoOutlined'), {
+  ssr: false,
+});
+
 const { Panel } = Collapse;
 
 // eslint-disable-next-line react/function-component-definition

web/components/admin/EditLogo.tsx

@@ -1,7 +1,7 @@
 import { Button, Upload } from 'antd';
 import { RcFile } from 'antd/lib/upload/interface';
-import { LoadingOutlined, UploadOutlined } from '@ant-design/icons';
 import React, { useState, useContext, FC } from 'react';
+import dynamic from 'next/dynamic';
 import { FormStatusIndicator } from './FormStatusIndicator';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import {
@@ -25,6 +25,16 @@ import {
   readableBytes,
 } from '../../utils/images';
 
+// Lazy loaded components
+
+const LoadingOutlined = dynamic(() => import('@ant-design/icons/LoadingOutlined'), {
+  ssr: false,
+});
+
+const UploadOutlined = dynamic(() => import('@ant-design/icons/UploadOutlined'), {
+  ssr: false,
+});
+
 // eslint-disable-next-line import/prefer-default-export
 export const EditLogo: FC = () => {
   const [logoUrl, setlogoUrl] = useState(null);

web/components/admin/InfoTip.tsx

@@ -1,7 +1,13 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
+import dynamic from 'next/dynamic';
 import { FC } from 'react';
 
+// Lazy loaded components
+
+const InfoCircleOutlined = dynamic(() => import('@ant-design/icons/InfoCircleOutlined'), {
+  ssr: false,
+});
+
 export type InfoTipProps = {
   tip: string | null;
 };

web/components/admin/MainLayout.tsx

@@ -5,20 +5,9 @@ import Head from 'next/head';
 import { differenceInSeconds } from 'date-fns';
 import { useRouter } from 'next/router';
 import { Layout, Menu, Alert, Button, Space, Tooltip } from 'antd';
-import {
-  SettingOutlined,
-  HomeOutlined,
-  LineChartOutlined,
-  ToolOutlined,
-  PlayCircleFilled,
-  MinusSquareFilled,
-  QuestionCircleOutlined,
-  MessageOutlined,
-  ExperimentOutlined,
-  EditOutlined,
-} from '@ant-design/icons';
 
 import classNames from 'classnames';
+import dynamic from 'next/dynamic';
 import { upgradeVersionAvailable } from '../../utils/apis';
 import { parseSecondsToDurationString } from '../../utils/format';
 
@@ -31,6 +20,48 @@ import { TEXTFIELD_PROPS_STREAM_TITLE } from '../../utils/config-constants';
 import { ComposeFederatedPost } from './ComposeFederatedPost';
 import { UpdateArgs } from '../../types/config-section';
 
+// Lazy loaded components
+
+const SettingOutlined = dynamic(() => import('@ant-design/icons/SettingOutlined'), {
+  ssr: false,
+}); // Lazy loaded components
+
+const HomeOutlined = dynamic(() => import('@ant-design/icons/HomeOutlined'), {
+  ssr: false,
+});
+
+const LineChartOutlined = dynamic(() => import('@ant-design/icons/LineChartOutlined'), {
+  ssr: false,
+});
+
+const ToolOutlined = dynamic(() => import('@ant-design/icons/ToolOutlined'), {
+  ssr: false,
+});
+
+const PlayCircleFilled = dynamic(() => import('@ant-design/icons/PlayCircleFilled'), {
+  ssr: false,
+});
+
+const MinusSquareFilled = dynamic(() => import('@ant-design/icons/MinusSquareFilled'), {
+  ssr: false,
+});
+
+const QuestionCircleOutlined = dynamic(() => import('@ant-design/icons/QuestionCircleOutlined'), {
+  ssr: false,
+});
+
+const MessageOutlined = dynamic(() => import('@ant-design/icons/MessageOutlined'), {
+  ssr: false,
+});
+
+const ExperimentOutlined = dynamic(() => import('@ant-design/icons/ExperimentOutlined'), {
+  ssr: false,
+});
+
+const EditOutlined = dynamic(() => import('@ant-design/icons/EditOutlined'), {
+  ssr: false,
+});
+
 export type MainLayoutProps = {
   children: ReactNode;
 };

web/components/admin/MessageVisiblityToggle.tsx

@@ -1,16 +1,30 @@
 // Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon
 import React, { useState, useEffect, FC } from 'react';
 import { Button, Tooltip } from 'antd';
-import {
-  EyeOutlined,
-  EyeInvisibleOutlined,
-  CheckCircleFilled,
-  ExclamationCircleFilled,
-} from '@ant-design/icons';
+
+import dynamic from 'next/dynamic';
 import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
 import { MessageType } from '../../types/chat';
 import { isEmptyObject } from '../../utils/format';
 
+// Lazy loaded components
+
+const EyeOutlined = dynamic(() => import('@ant-design/icons/EyeOutlined'), {
+  ssr: false,
+});
+
+const EyeInvisibleOutlined = dynamic(() => import('@ant-design/icons/EyeInvisibleOutlined'), {
+  ssr: false,
+});
+
+const CheckCircleFilled = dynamic(() => import('@ant-design/icons/CheckCircleFilled'), {
+  ssr: false,
+});
+
+const ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {
+  ssr: false,
+});
+
 export type MessageToggleProps = {
   isVisible: boolean;
   message: MessageType;

web/components/admin/ModeratorUserButton.tsx

@@ -1,14 +1,31 @@
 import { Modal, Button } from 'antd';
-import {
-  ExclamationCircleFilled,
-  QuestionCircleFilled,
-  StopTwoTone,
-  SafetyCertificateTwoTone,
-} from '@ant-design/icons';
+
 import { FC } from 'react';
+import dynamic from 'next/dynamic';
 import { USER_SET_MODERATOR, fetchData } from '../../utils/apis';
 import { User } from '../../types/chat';
 
+// Lazy loaded components
+
+const ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {
+  ssr: false,
+});
+
+const QuestionCircleFilled = dynamic(() => import('@ant-design/icons/QuestionCircleFilled'), {
+  ssr: false,
+});
+
+const StopTwoTone = dynamic(() => import('@ant-design/icons/StopTwoTone'), {
+  ssr: false,
+});
+
+const SafetyCertificateTwoTone = dynamic(
+  () => import('@ant-design/icons/SafetyCertificateTwoTone'),
+  {
+    ssr: false,
+  },
+);
+
 export type ModeratorUserButtonProps = {
   user: User;
   onClick?: () => void;

web/components/admin/Offline.tsx

@@ -1,7 +1,7 @@
-import { BookTwoTone, MessageTwoTone, PlaySquareTwoTone, ProfileTwoTone } from '@ant-design/icons';
 import { Card, Col, Row, Typography } from 'antd';
 import Link from 'next/link';
 import { FC, useContext } from 'react';
+import dynamic from 'next/dynamic';
 import { LogTable } from './LogTable';
 import { OwncastLogo } from '../common/OwncastLogo/OwncastLogo';
 import { NewsFeed } from './NewsFeed';
@@ -13,6 +13,24 @@ const { Paragraph, Text } = Typography;
 const { Title } = Typography;
 const { Meta } = Card;
 
+// Lazy loaded components
+
+const BookTwoTone = dynamic(() => import('@ant-design/icons/BookTwoTone'), {
+  ssr: false,
+});
+
+const MessageTwoTone = dynamic(() => import('@ant-design/icons/MessageTwoTone'), {
+  ssr: false,
+});
+
+const PlaySquareTwoTone = dynamic(() => import('@ant-design/icons/PlaySquareTwoTone'), {
+  ssr: false,
+});
+
+const ProfileTwoTone = dynamic(() => import('@ant-design/icons/ProfileTwoTone'), {
+  ssr: false,
+});
+
 function generateStreamURL(serverURL, rtmpServerPort) {
   return `rtmp://${serverURL.replace(/(^\w+:|^)\/\//, '')}:${rtmpServerPort}/live`;
 }

web/components/admin/StreamHealthOverview.tsx

@@ -1,9 +1,22 @@
-import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';
+import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import React, { FC, useContext } from 'react';
 import { ServerStatusContext } from '../../utils/server-status-context';
 
+// Lazy loaded components
+
+const CheckCircleOutlined = dynamic(() => import('@ant-design/icons/CheckCircleOutlined'), {
+  ssr: false,
+});
+
+const ExclamationCircleOutlined = dynamic(
+  () => import('@ant-design/icons/ExclamationCircleOutlined'),
+  {
+    ssr: false,
+  },
+);
+
 export type StreamHealthOverviewProps = {
   showTroubleshootButton?: Boolean;
 };

web/components/admin/VideoVariantForm.tsx

@@ -1,8 +1,8 @@
 // This content populates the video variant modal, which is spawned from the variants table. This relies on the `dataState` prop fed in by the table.
 import React, { FC } from 'react';
 import { Popconfirm, Row, Col, Slider, Collapse, Typography, Alert, Button } from 'antd';
-import { ExclamationCircleFilled } from '@ant-design/icons';
 import classNames from 'classnames';
+import dynamic from 'next/dynamic';
 import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';
 import { TextField } from './TextField';
 import {
@@ -21,6 +21,12 @@ import { ToggleSwitch } from './ToggleSwitch';
 
 const { Panel } = Collapse;
 
+// Lazy loaded components
+
+const ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {
+  ssr: false,
+});
+
 export type VideoVariantFormProps = {
   dataState: VideoVariant;
   onUpdateField: FieldUpdaterFunc;

web/components/admin/config/general/EditSocialLinks.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { Typography, Table, Button, Modal, Input } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { CaretDownOutlined, CaretUpOutlined, DeleteOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { SocialDropdown } from '../../SocialDropdown';
 import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../utils/apis';
 import { ServerStatusContext } from '../../../../utils/server-status-context';
@@ -25,6 +25,20 @@ import { FormStatusIndicator } from '../../FormStatusIndicator';
 
 const { Title } = Typography;
 
+// Lazy loaded components
+
+const CaretDownOutlined = dynamic(() => import('@ant-design/icons/CaretDownOutlined'), {
+  ssr: false,
+});
+
+const CaretUpOutlined = dynamic(() => import('@ant-design/icons/CaretUpOutlined'), {
+  ssr: false,
+});
+
+const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+  ssr: false,
+});
+
 // eslint-disable-next-line react/function-component-definition
 export default function EditSocialLinks() {
   const [availableIconsList, setAvailableIconsList] = useState([]);

web/components/admin/config/server/StreamKeys.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import { Table, Space, Button, Typography, Alert, Input, Form } from 'antd';
-import { DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { ServerStatusContext } from '../../../../utils/server-status-context';
 
 import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis';
@@ -8,6 +8,20 @@ import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis';
 const { Paragraph } = Typography;
 const { Item } = Form;
 
+// Lazy loaded components
+
+const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+  ssr: false,
+});
+
+const EyeOutlined = dynamic(() => import('@ant-design/icons/EyeOutlined'), {
+  ssr: false,
+});
+
+const PlusOutlined = dynamic(() => import('@ant-design/icons/PlusOutlined'), {
+  ssr: false,
+});
+
 const saveKeys = async (keys, setError) => {
   try {
     await fetchData(UPDATE_STREAM_KEYS, {