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

web/pages/admin/access-tokens.tsx

@@ -12,10 +12,10 @@ import {
   Col,
   Tooltip,
 } from 'antd';
-import { DeleteOutlined } from '@ant-design/icons';
 
 import format from 'date-fns/format';
 
+import dynamic from 'next/dynamic';
 import {
   fetchData,
   ACCESS_TOKENS,
@@ -25,6 +25,12 @@ import {
 
 const { Title, Paragraph } = Typography;
 
+// Lazy loaded components
+
+const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+  ssr: false,
+});
+
 const availableScopes = {
   CAN_SEND_SYSTEM_MESSAGES: {
     name: 'System messages',

web/pages/admin/actions.tsx

@@ -1,6 +1,6 @@
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Form, Input, Modal, Space, Table, Typography } from 'antd';
 import _ from 'lodash';
+import dynamic from 'next/dynamic';
 import React, { useContext, useEffect, useState } from 'react';
 import { FormStatusIndicator } from '../../components/admin/FormStatusIndicator';
 import { ExternalAction } from '../../interfaces/external-action';
@@ -14,6 +14,17 @@ import { ServerStatusContext } from '../../utils/server-status-context';
 import { isValidUrl, DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
 
 const { Title, Paragraph } = Typography;
+
+// Lazy loaded components
+
+const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+  ssr: false,
+});
+
+const EditOutlined = dynamic(() => import('@ant-design/icons/EditOutlined'), {
+  ssr: false,
+});
+
 let resetTimer = null;
 
 interface Props {

web/pages/admin/chat/emojis.tsx

@@ -1,7 +1,7 @@
-import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Space, Table, Typography, Upload } from 'antd';
 import { RcFile } from 'antd/lib/upload';
 import React, { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
 import FormStatusIndicator from '../../../components/admin/FormStatusIndicator';
 
 import { DELETE_EMOJI, fetchData, UPLOAD_EMOJI } from '../../../utils/apis';
@@ -16,6 +16,12 @@ import {
 import { RESET_TIMEOUT } from '../../../utils/config-constants';
 import { URL_CUSTOM_EMOJIS } from '../../../utils/constants';
 
+// Lazy loaded components
+
+const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+  ssr: false,
+});
+
 type CustomEmoji = {
   name: string;
   url: string;

web/pages/admin/chat/messages.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Table, Typography, Button } from 'antd';
-import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
 import classNames from 'classnames';
 import { ColumnsType } from 'antd/es/table';
 import format from 'date-fns/format';
 
+import dynamic from 'next/dynamic';
 import { MessageType } from '../../../types/chat';
 import {
   CHAT_HISTORY,
@@ -18,6 +18,16 @@ import { UserPopover } from '../../../components/admin/UserPopover';
 
 const { Title } = Typography;
 
+// Lazy loaded components
+
+const CheckCircleFilled = dynamic(() => import('@ant-design/icons/CheckCircleFilled'), {
+  ssr: false,
+});
+
+const ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {
+  ssr: false,
+});
+
 function createUserNameFilters(messages: MessageType[]) {
   const filtered = messages.reduce((acc, curItem) => {
     const curAuthor = curItem.user.id;

web/pages/admin/federation/followers.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react';
 import { Table, Avatar, Button, Tabs } from 'antd';
 import { ColumnsType, SortOrder } from 'antd/lib/table/interface';
 import format from 'date-fns/format';
-import { UserAddOutlined, UserDeleteOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { ServerStatusContext } from '../../../utils/server-status-context';
 import {
   FOLLOWERS,
@@ -13,6 +13,15 @@ import {
 } from '../../../utils/apis';
 import { isEmptyObject } from '../../../utils/format';
 
+// Lazy loaded components
+
+const UserAddOutlined = dynamic(() => import('@ant-design/icons/UserAddOutlined'), {
+  ssr: false,
+});
+
+const UserDeleteOutlined = dynamic(() => import('@ant-design/icons/UserDeleteOutlined'), {
+  ssr: false,
+});
 export interface Follower {
   link: string;
   username: string;

web/pages/admin/hardware-info.tsx

@@ -1,10 +1,24 @@
-import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
 import { Row, Col, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
 import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../../utils/apis';
 import { Chart } from '../../components/admin/Chart';
 import { StatisticItem } from '../../components/admin/StatisticItem';
 
+// Lazy loaded components
+
+const BulbOutlined = dynamic(() => import('@ant-design/icons/BulbOutlined'), {
+  ssr: false,
+});
+
+const LaptopOutlined = dynamic(() => import('@ant-design/icons/LaptopOutlined'), {
+  ssr: false,
+});
+
+const SaveOutlined = dynamic(() => import('@ant-design/icons/SaveOutlined'), {
+  ssr: false,
+});
+
 // TODO: FIX TS WARNING FROM THIS.
 // interface TimedValue {
 //   time: Date;

web/pages/admin/help.tsx

@@ -1,19 +1,51 @@
 import { Button, Card, Col, Divider, Result, Row } from 'antd';
 import Meta from 'antd/lib/card/Meta';
 import Title from 'antd/lib/typography/Title';
-import {
-  ApiTwoTone,
-  BugTwoTone,
-  CameraTwoTone,
-  DatabaseTwoTone,
-  EditTwoTone,
-  Html5TwoTone,
-  LinkOutlined,
-  QuestionCircleTwoTone,
-  SettingTwoTone,
-  SlidersTwoTone,
-} from '@ant-design/icons';
+
 import React from 'react';
+import dynamic from 'next/dynamic';
+
+// Lazy loaded components
+
+const ApiTwoTone = dynamic(() => import('@ant-design/icons/ApiTwoTone'), {
+  ssr: false,
+});
+
+const BugTwoTone = dynamic(() => import('@ant-design/icons/BugTwoTone'), {
+  ssr: false,
+});
+
+const CameraTwoTone = dynamic(() => import('@ant-design/icons/CameraTwoTone'), {
+  ssr: false,
+});
+
+const DatabaseTwoTone = dynamic(() => import('@ant-design/icons/DatabaseTwoTone'), {
+  ssr: false,
+});
+
+const EditTwoTone = dynamic(() => import('@ant-design/icons/EditTwoTone'), {
+  ssr: false,
+});
+
+const Html5TwoTone = dynamic(() => import('@ant-design/icons/Html5TwoTone'), {
+  ssr: false,
+});
+
+const LinkOutlined = dynamic(() => import('@ant-design/icons/LinkOutlined'), {
+  ssr: false,
+});
+
+const QuestionCircleTwoTone = dynamic(() => import('@ant-design/icons/QuestionCircleTwoTone'), {
+  ssr: false,
+});
+
+const SettingTwoTone = dynamic(() => import('@ant-design/icons/SettingTwoTone'), {
+  ssr: false,
+});
+
+const SlidersTwoTone = dynamic(() => import('@ant-design/icons/SlidersTwoTone'), {
+  ssr: false,
+});
 
 export default function Help() {
   const questions = [

web/pages/admin/index.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @next/next/no-css-tags */
 import React, { useState, useEffect, useContext } from 'react';
 import { Skeleton, Card, Statistic, Row, Col } from 'antd';
-import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { formatDistanceToNow, formatRelative } from 'date-fns';
+import dynamic from 'next/dynamic';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { LogTable } from '../../components/admin/LogTable';
 import { Offline } from '../../components/admin/Offline';
@@ -12,6 +12,16 @@ import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../../utils/apis';
 import { formatIPAddress, isEmptyObject } from '../../utils/format';
 import { NewsFeed } from '../../components/admin/NewsFeed';
 
+// Lazy loaded components
+
+const UserOutlined = dynamic(() => import('@ant-design/icons/UserOutlined'), {
+  ssr: false,
+});
+
+const ClockCircleOutlined = dynamic(() => import('@ant-design/icons/ClockCircleOutlined'), {
+  ssr: false,
+});
+
 function streamDetailsFormatter(streamDetails) {
   return (
     <ul className="statistics-list">

web/pages/admin/stream-health.tsx

@@ -2,11 +2,25 @@
 // import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
 import { Row, Col, Typography, Space, Statistic, Card, Alert, Spin } from 'antd';
 import React, { ReactNode, useEffect, useState } from 'react';
-import { ClockCircleOutlined, WarningOutlined, WifiOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { fetchData, FETCH_INTERVAL, API_STREAM_HEALTH_METRICS } from '../../utils/apis';
 import { Chart } from '../../components/admin/Chart';
 import { StreamHealthOverview } from '../../components/admin/StreamHealthOverview';
 
+// Lazy loaded components
+
+const ClockCircleOutlined = dynamic(() => import('@ant-design/icons/ClockCircleOutlined'), {
+  ssr: false,
+});
+
+const WarningOutlined = dynamic(() => import('@ant-design/icons/WarningOutlined'), {
+  ssr: false,
+});
+
+const WifiOutlined = dynamic(() => import('@ant-design/icons/WifiOutlined'), {
+  ssr: false,
+});
+
 interface TimedValue {
   time: Date;
   value: Number;

web/pages/admin/viewer-info.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Row, Col, Typography, Menu, Dropdown, Spin, Alert } from 'antd';
-import { DownOutlined, UserOutlined } from '@ant-design/icons';
 import { getUnixTime, sub } from 'date-fns';
+import dynamic from 'next/dynamic';
 import { Chart } from '../../components/admin/Chart';
 import { StatisticItem } from '../../components/admin/StatisticItem';
 import { ViewerTable } from '../../components/admin/ViewerTable';
@@ -10,6 +10,16 @@ import { ServerStatusContext } from '../../utils/server-status-context';
 
 import { VIEWERS_OVER_TIME, ACTIVE_VIEWER_DETAILS, fetchData } from '../../utils/apis';
 
+// Lazy loaded components
+
+const DownOutlined = dynamic(() => import('@ant-design/icons/DownOutlined'), {
+  ssr: false,
+});
+
+const UserOutlined = dynamic(() => import('@ant-design/icons/UserOutlined'), {
+  ssr: false,
+});
+
 const FETCH_INTERVAL = 60 * 1000; // 1 min
 
 export default function ViewersOverTime() {

web/pages/admin/webhooks.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/destructuring-assignment */
-import { DeleteOutlined } from '@ant-design/icons';
 import {
   Button,
   Checkbox,
@@ -13,12 +12,19 @@ import {
   Typography,
   Tooltip,
 } from 'antd';
+import dynamic from 'next/dynamic';
 import React, { useEffect, useState } from 'react';
 import { CREATE_WEBHOOK, DELETE_WEBHOOK, fetchData, WEBHOOKS } from '../../utils/apis';
 import { isValidUrl, DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
 
 const { Title, Paragraph } = Typography;
 
+// Lazy loaded components
+
+const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+  ssr: false,
+});
+
 const availableEvents = {
   CHAT: { name: 'Chat messages', description: 'When a user sends a chat message', color: 'purple' },
   USER_JOINED: { name: 'User joined', description: 'When a user joins the chat', color: 'green' },