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

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;