Lazy load tooltip

web/components/MainLayout.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import Head from 'next/head';
 import { differenceInSeconds } from 'date-fns';
 import { useRouter } from 'next/router';
-import { Layout, Menu, Alert, Button, Space, Tooltip } from 'antd';
+import { Layout, Menu, Alert, Button, Space } from 'antd';
 import {
   SettingOutlined,
   HomeOutlined,
@@ -19,6 +19,7 @@ import {
 } from '@ant-design/icons';
 
 import classNames from 'classnames';
+import dynamic from 'next/dynamic';
 import { upgradeVersionAvailable } from '../utils/apis';
 import { parseSecondsToDurationString } from '../utils/format';
 
@@ -33,6 +34,10 @@ import { UpdateArgs } from '../types/config-section';
 
 import FediverseIcon from '../assets/images/fediverse-black.png';
 
+// Lazy loaded components
+
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+
 export type MainLayoutProps = {
   children: ReactNode;
 };

web/components/MessageVisiblityToggle.tsx

@@ -1,17 +1,22 @@
 // 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 { Button } 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 { OUTCOME_TIMEOUT } from '../pages/admin/chat/messages';
 import { isEmptyObject } from '../utils/format';
 
+// Lazy loaded components
+
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+
 export type MessageToggleProps = {
   isVisible: boolean;
   message: MessageType;

web/components/UserPopover.tsx

@@ -1,11 +1,12 @@
 // This displays a clickable user name (or whatever children element you provide), and displays a simple tooltip of created time. OnClick a modal with more information about the user is displayed.
 
 import { useState, ReactNode, FC } from 'react';
-import { Divider, Modal, Tooltip, Typography, Row, Col, Space } from 'antd';
+import { Divider, Modal, Typography, Row, Col, Space } from 'antd';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import format from 'date-fns/format';
 import { uniq } from 'lodash';
 
+import dynamic from 'next/dynamic';
 import { BanUserButton } from './BanUserButton';
 import { ModeratorUserButton } from './ModeratorUserButton';
 
@@ -13,6 +14,10 @@ import { User, UserConnectionInfo } from '../types/chat';
 import { formatDisplayDate } from './UserTable';
 import { formatUAstring } from '../utils/format';
 
+// Lazy loaded components
+
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+
 export type UserPopoverProps = {
   user: User;
   connectionInfo?: UserConnectionInfo | null;

web/components/config/EditInstanceDetails2.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { Button, Tooltip, Collapse, Typography } from 'antd';
+import { Button, Collapse, Typography } from 'antd';
 import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
+import dynamic from 'next/dynamic';
 import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD, TEXTFIELD_TYPE_URL } from './TextField';
 import { TextFieldWithSubmit } from './TextFieldWithSubmit';
 import { ServerStatusContext } from '../../utils/server-status-context';
@@ -15,6 +16,10 @@ import {
 import { UpdateArgs } from '../../types/config-section';
 import { ResetYP } from './ResetYP';
 
+// Lazy loaded components
+
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+
 const { Panel } = Collapse;
 
 export const EditInstanceDetails = () => {

web/components/ui/Header/Header.tsx

@@ -1,12 +1,20 @@
-import { Layout, Tag, Tooltip } from 'antd';
+import { Layout, Tag } from 'antd';
 import { FC } from 'react';
 import cn from 'classnames';
-import { UserDropdown } from '../../common/UserDropdown/UserDropdown';
+import dynamic from 'next/dynamic';
 import { OwncastLogo } from '../../common/OwncastLogo/OwncastLogo';
 import styles from './Header.module.scss';
 
 const { Header: AntHeader } = Layout;
 
+// Lazy loaded components
+
+const UserDropdown = dynamic(() =>
+  import('../../common/UserDropdown/UserDropdown').then(mod => mod.UserDropdown),
+);
+
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+
 export type HeaderComponentProps = {
   name: string;
   chatAvailable: boolean;

web/pages/admin/access-tokens.tsx

@@ -1,21 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import {
-  Table,
-  Tag,
-  Space,
-  Button,
-  Modal,
-  Checkbox,
-  Input,
-  Typography,
-  Tooltip,
-  Row,
-  Col,
-} from 'antd';
+import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Row, Col } 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 +14,10 @@ import {
 
 const { Title, Paragraph } = Typography;
 
+// Lazy loaded components
+
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+
 const availableScopes = {
   CAN_SEND_SYSTEM_MESSAGES: {
     name: 'System messages',

web/pages/admin/webhooks.tsx

@@ -1,22 +1,15 @@
 /* eslint-disable react/destructuring-assignment */
 import { DeleteOutlined } from '@ant-design/icons';
-import {
-  Button,
-  Checkbox,
-  Col,
-  Input,
-  Modal,
-  Row,
-  Space,
-  Table,
-  Tag,
-  Tooltip,
-  Typography,
-} from 'antd';
+import { Button, Checkbox, Col, Input, Modal, Row, Space, Table, Tag, Typography } 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';
 
+// Lazy loaded components
+
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+
 const { Title, Paragraph } = Typography;
 
 const availableEvents = {