diff --git a/web/components/admin/EditInstanceDetails2.tsx b/web/components/admin/EditInstanceDetails2.tsx
index 5679c8fdb..74103e789 100644
--- a/web/components/admin/EditInstanceDetails2.tsx
+++ b/web/components/admin/EditInstanceDetails2.tsx
@@ -18,7 +18,9 @@ import { ResetYP } from './ResetYP';
// Lazy loaded components
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+ ssr: false,
+});
const { Panel } = Collapse;
diff --git a/web/components/admin/MainLayout.tsx b/web/components/admin/MainLayout.tsx
index 404a52b83..c34e6af64 100644
--- a/web/components/admin/MainLayout.tsx
+++ b/web/components/admin/MainLayout.tsx
@@ -36,7 +36,9 @@ import FediverseIcon from '../../assets/images/fediverse-black.png';
// Lazy loaded components
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+ ssr: false,
+});
export type MainLayoutProps = {
children: ReactNode;
diff --git a/web/components/admin/MessageVisiblityToggle.tsx b/web/components/admin/MessageVisiblityToggle.tsx
index 3f576db71..4ed1c697f 100644
--- a/web/components/admin/MessageVisiblityToggle.tsx
+++ b/web/components/admin/MessageVisiblityToggle.tsx
@@ -14,7 +14,9 @@ import { isEmptyObject } from '../../utils/format';
// Lazy loaded components
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+ ssr: false,
+});
export type MessageToggleProps = {
isVisible: boolean;
diff --git a/web/components/admin/UserPopover.tsx b/web/components/admin/UserPopover.tsx
index 02defc66c..673888865 100644
--- a/web/components/admin/UserPopover.tsx
+++ b/web/components/admin/UserPopover.tsx
@@ -16,7 +16,9 @@ import { formatUAstring } from '../../utils/format';
// Lazy loaded components
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+ ssr: false,
+});
export type UserPopoverProps = {
user: User;
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index 26b032a13..e4f3585ba 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -14,7 +14,9 @@ import { User } from '../../../interfaces/user.model';
// Lazy loaded components
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+ ssr: false,
+});
const ChatModerationActionMenu = dynamic(() =>
import('../ChatModerationActionMenu/ChatModerationActionMenu').then(
diff --git a/web/components/layouts/Main.tsx b/web/components/layouts/Main.tsx
index 9db67742b..e79a4f8b6 100644
--- a/web/components/layouts/Main.tsx
+++ b/web/components/layouts/Main.tsx
@@ -1,6 +1,5 @@
/* eslint-disable react/no-danger */
/* eslint-disable react/no-unescaped-entities */
-import { Layout } from 'antd';
import { useRecoilValue } from 'recoil';
import Head from 'next/head';
import { FC, useEffect, useRef } from 'react';
@@ -16,22 +15,36 @@ import { Header } from '../ui/Header/Header';
import { ClientConfig } from '../../interfaces/client-config.model';
import { DisplayableError } from '../../types/displayable-error';
import setupNoLinkReferrer from '../../utils/no-link-referrer';
-import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
-import { PushNotificationServiceWorker } from '../workers/PushNotificationServiceWorker/PushNotificationServiceWorker';
import { Content } from '../ui/Content/Content';
import { Theme } from '../theme/Theme';
// Lazy loaded components
+const TitleNotifier = dynamic(
+ () => import('../TitleNotifier/TitleNotifier').then(mod => mod.TitleNotifier),
+ {
+ ssr: false,
+ },
+);
+
+const PushNotificationServiceWorker = dynamic(
+ () =>
+ import('../workers/PushNotificationServiceWorker/PushNotificationServiceWorker').then(
+ mod => mod.PushNotificationServiceWorker,
+ ),
+ {
+ ssr: false,
+ },
+);
+
const FatalErrorStateModal = dynamic(
() =>
import('../modals/FatalErrorStateModal/FatalErrorStateModal').then(
mod => mod.FatalErrorStateModal,
),
{
- loading: () =>
Loading...
,
ssr: false,
},
);
@@ -128,13 +141,13 @@ export const Main: FC = () => {
-
+
{fatalError && (
)}
-
+
>
);
};
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index e9d5615c8..d2d9dc200 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -1,5 +1,5 @@
import { useRecoilState, useRecoilValue } from 'recoil';
-import { Layout, Tabs, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
import { FC, useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
@@ -37,34 +37,60 @@ import { ExternalAction } from '../../../interfaces/external-action';
import { Modal } from '../Modal/Modal';
import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
-const { Content: AntContent } = Layout;
-
// Lazy loaded components
-const FollowerCollection = dynamic(() =>
- import('../followers/FollowerCollection/FollowerCollection').then(mod => mod.FollowerCollection),
+const FollowerCollection = dynamic(
+ () =>
+ import('../followers/FollowerCollection/FollowerCollection').then(
+ mod => mod.FollowerCollection,
+ ),
+ {
+ ssr: false,
+ },
);
-const FollowModal = dynamic(() =>
- import('../../modals/FollowModal/FollowModal').then(mod => mod.FollowModal),
+const FollowModal = dynamic(
+ () => import('../../modals/FollowModal/FollowModal').then(mod => mod.FollowModal),
+ {
+ ssr: false,
+ },
);
-const BrowserNotifyModal = dynamic(() =>
- import('../../modals/BrowserNotifyModal/BrowserNotifyModal').then(mod => mod.BrowserNotifyModal),
+const BrowserNotifyModal = dynamic(
+ () =>
+ import('../../modals/BrowserNotifyModal/BrowserNotifyModal').then(
+ mod => mod.BrowserNotifyModal,
+ ),
+ {
+ ssr: false,
+ },
);
-const NotifyReminderPopup = dynamic(() =>
- import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup),
+const NotifyReminderPopup = dynamic(
+ () => import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup),
+ {
+ ssr: false,
+ },
);
-const OwncastPlayer = dynamic(() =>
- import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer),
+const OwncastPlayer = dynamic(
+ () => import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer),
+ {
+ ssr: false,
+ },
);
-const ChatContainer = dynamic(() =>
- import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
+const ChatContainer = dynamic(
+ () => import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
+ {
+ ssr: false,
+ },
);
+const Tabs = dynamic(() => import('antd').then(mod => mod.Tabs), {
+ ssr: false,
+});
+
const DesktopContent = ({
name,
streamTitle,
@@ -301,7 +327,7 @@ export const Content: FC = () => {
return (
<>
-
+
{appState.appLoading && }
@@ -389,7 +415,7 @@ export const Content: FC = () => {
{showChat && !isMobile &&
}
-
+
{!isMobile && false &&
}
{externalActionToDisplay && (
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index a85df0998..fe8c36643 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -1,19 +1,19 @@
-import { Layout, Tag } from 'antd';
+import { Tag } from 'antd';
import { FC } from 'react';
import cn from 'classnames';
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));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+ ssr: false,
+});
export type HeaderComponentProps = {
name: string;
@@ -26,7 +26,7 @@ export const Header: FC = ({
chatAvailable,
chatDisabled,
}) => (
-
+
);
export default Header;
diff --git a/web/pages/admin/access-tokens.tsx b/web/pages/admin/access-tokens.tsx
index 27220a059..473e85118 100644
--- a/web/pages/admin/access-tokens.tsx
+++ b/web/pages/admin/access-tokens.tsx
@@ -16,7 +16,9 @@ const { Title, Paragraph } = Typography;
// Lazy loaded components
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+ ssr: false,
+});
const availableScopes = {
CAN_SEND_SYSTEM_MESSAGES: {
diff --git a/web/pages/admin/webhooks.tsx b/web/pages/admin/webhooks.tsx
index be16e41f5..022b0435e 100644
--- a/web/pages/admin/webhooks.tsx
+++ b/web/pages/admin/webhooks.tsx
@@ -8,7 +8,9 @@ import { isValidUrl, DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
// Lazy loaded components
-const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip), {
+ ssr: false,
+});
const { Title, Paragraph } = Typography;