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

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;