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

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">