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

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.tsx

@@ -1,10 +1,24 @@
 import { FC } from 'react';
 import { Button, Dropdown, Menu } from 'antd';
 import classNames from 'classnames';
-import { EllipsisOutlined, HeartOutlined, BellOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import styles from './ActionButtonMenu.module.scss';
 import { ExternalAction } from '../../../interfaces/external-action';
 
+// Lazy loaded components
+
+const EllipsisOutlined = dynamic(() => import('@ant-design/icons/EllipsisOutlined'), {
+  ssr: false,
+});
+
+const HeartOutlined = dynamic(() => import('@ant-design/icons/HeartOutlined'), {
+  ssr: false,
+});
+
+const BellOutlined = dynamic(() => import('@ant-design/icons/BellOutlined'), {
+  ssr: false,
+});
+
 const NOTIFY_KEY = 'notify';
 const FOLLOW_KEY = 'follow';
 

web/components/action-buttons/FollowButton.tsx

@@ -1,9 +1,15 @@
 import { Button, ButtonProps } from 'antd';
-import { HeartFilled } from '@ant-design/icons';
 
 import { FC } from 'react';
+import dynamic from 'next/dynamic';
 import styles from './ActionButton/ActionButton.module.scss';
 
+// Lazy loaded components
+
+const HeartFilled = dynamic(() => import('@ant-design/icons/HeartFilled'), {
+  ssr: false,
+});
+
 export type FollowButtonProps = ButtonProps & {
   onClick?: () => void;
   props?: ButtonProps;

web/components/action-buttons/NotifyButton.tsx

@@ -1,8 +1,14 @@
 import { Button } from 'antd';
-import { BellFilled } from '@ant-design/icons';
 import { FC } from 'react';
+import dynamic from 'next/dynamic';
 import styles from './ActionButton/ActionButton.module.scss';
 
+// Lazy loaded components
+
+const BellFilled = dynamic(() => import('@ant-design/icons/BellFilled'), {
+  ssr: false,
+});
+
 export type NotifyButtonProps = {
   text?: string;
   onClick?: () => void;