Fix some React lifecycle and rendering errors that exist in build

web/components/admin/EditInstanceDetails2.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { Button, Collapse, Typography } from 'antd';
+import { Button, Collapse, Typography, Tooltip } 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';
@@ -18,10 +17,6 @@ import { ResetYP } from './ResetYP';
 
 // Lazy loaded components
 
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
-  ssr: false,
-});
-
 const { Panel } = Collapse;
 
 // eslint-disable-next-line react/function-component-definition

web/components/admin/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 } from 'antd';
+import { Layout, Menu, Alert, Button, Space, Tooltip } from 'antd';
 import {
   SettingOutlined,
   HomeOutlined,
@@ -19,7 +19,6 @@ import {
 } from '@ant-design/icons';
 
 import classNames from 'classnames';
-import dynamic from 'next/dynamic';
 import { upgradeVersionAvailable } from '../../utils/apis';
 import { parseSecondsToDurationString } from '../../utils/format';
 
@@ -34,12 +33,6 @@ 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), {
-  ssr: false,
-});
-
 export type MainLayoutProps = {
   children: ReactNode;
 };

web/components/admin/MessageVisiblityToggle.tsx

@@ -1,23 +1,16 @@
 // 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 } from 'antd';
+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 Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
-  ssr: false,
-});
-
 export type MessageToggleProps = {
   isVisible: boolean;
   message: MessageType;

web/components/admin/UserPopover.tsx

@@ -1,12 +1,11 @@
 // 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, Typography, Row, Col, Space } from 'antd';
+import { Divider, Modal, Typography, Row, Col, Space, Tooltip } 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';
 
@@ -14,12 +13,6 @@ 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), {
-  ssr: false,
-});
-
 export type UserPopoverProps = {
   user: User;
   connectionInfo?: UserConnectionInfo | null;