mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-02-04 13:09:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5581] fix: resolve logo spinner hydration and theme loading issues (#8450)

Browse Source 
- Fix hydration mismatch by lazy loading components that depend on theme
- Ensure LogoSpinner renders with correct theme on initial load
This commit is contained in:
Prateek Shourya
2025-12-24 17:29:27 +05:30
committed by GitHub
parent 0c795e95ac
commit 27a7cdcfc3
5 changed files with 43 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/web/app/provider.tsx
View File

@@ -1,5 +1,5 @@
import { lazy, Suspense } from "react";
import { useTheme, ThemeProvider } from "next-themes";
import { useTheme } from "next-themes";
import { SWRConfig } from "swr";
// Plane Imports
import { WEB_SWR_CONFIG } from "@plane/constants";
@@ -9,44 +9,45 @@ import { Toast } from "@plane/propel/toast";
import { resolveGeneralTheme } from "@plane/utils";
// polyfills
import "@/lib/polyfills";
// progress bar
import { AppProgressBar } from "@/lib/b-progress";
// mobx store provider
import { StoreProvider } from "@/lib/store-context";
// wrappers
import { InstanceWrapper } from "@/lib/wrappers/instance-wrapper";
// lazy imports
const AppProgressBar = lazy(function AppProgressBar() {
return import("@/lib/b-progress/AppProgressBar");
});
const StoreWrapper = lazy(function StoreWrapper() {
return import("@/lib/wrappers/store-wrapper");
});
const PostHogProvider = lazy(function PostHogProvider() {
return import("@/lib/posthog-provider");
const InstanceWrapper = lazy(function InstanceWrapper() {
return import("@/lib/wrappers/instance-wrapper");
});
const ChatSupportModal = lazy(function ChatSupportModal() {
return import("@/components/global/chat-support-modal");
});
const PostHogProvider = lazy(function PostHogProvider() {
return import("@/lib/posthog-provider");
});
export interface IAppProvider {
children: React.ReactNode;
}
function ToastWithTheme() {
const { resolvedTheme } = useTheme();
return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
}
export function AppProvider(props: IAppProvider) {
const { children } = props;
// themes
const { resolvedTheme } = useTheme();
return (
<StoreProvider>
<ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">
<>
<AppProgressBar />
<TranslationProvider>
<ToastWithTheme />
<Toast theme={resolveGeneralTheme(resolvedTheme)} />
<StoreWrapper>
<InstanceWrapper>
<Suspense>
@@ -58,7 +59,7 @@ export function AppProvider(props: IAppProvider) {
</InstanceWrapper>
</StoreWrapper>
</TranslationProvider>
</ThemeProvider>
</>
</StoreProvider>
);
}

35
apps/web/app/root.tsx
View File

@@ -3,6 +3,7 @@ import * as Sentry from "@sentry/react-router";
import Script from "next/script";
import { Links, Meta, Outlet, Scripts } from "react-router";
import type { LinksFunction } from "react-router";
import { ThemeProvider, useTheme } from "next-themes";
// plane imports
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
import { cn } from "@plane/utils";
@@ -14,9 +15,10 @@ import faviconIco from "@/app/assets/favicon/favicon.ico?url";
import icon180 from "@/app/assets/icons/icon-180x180.png?url";
import icon512 from "@/app/assets/icons/icon-512x512.png?url";
import ogImage from "@/app/assets/og-image.png?url";
import { LogoSpinner } from "@/components/common/logo-spinner";
import globalStyles from "@/styles/globals.css?url";
import type { Route } from "./+types/root";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
// local
import { CustomErrorComponent } from "./error";
import { AppProvider } from "./provider";
@@ -51,7 +53,7 @@ export function Layout({ children }: { children: ReactNode }) {
const isSessionRecorderEnabled = parseInt(process.env.VITE_ENABLE_SESSION_RECORDER || "0");
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -66,16 +68,12 @@ export function Layout({ children }: { children: ReactNode }) {
<Meta />
<Links />
</head>
<body>
<body suppressHydrationWarning>
<div id="context-menu-portal" />
<div id="editor-portal" />
<AppProvider>
<div
className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "desktop-app-container")}
>
<main className="w-full h-full overflow-hidden relative">{children}</main>
</div>
</AppProvider>
<ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">
{children}
</ThemeProvider>
<Scripts />
{!!isSessionRecorderEnabled && process.env.VITE_SESSION_RECORDER_KEY && (
<Script id="clarity-tracking">
@@ -118,12 +116,25 @@ export const meta: Route.MetaFunction = () => [
];
export default function Root() {
return <Outlet />;
return (
<AppProvider>
<div className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "desktop-app-container")}>
<main className="w-full h-full overflow-hidden relative">
<Outlet />
</main>
</div>
</AppProvider>
);
}
export function HydrateFallback() {
const { resolvedTheme } = useTheme();
// if we are on the server or the theme is not resolved, return an empty div
if (typeof window === "undefined" || resolvedTheme === undefined) return <div />;
return (
<div className="relative flex h-screen w-full items-center justify-center">
<div className="relative flex bg-canvas h-screen w-full items-center justify-center">
<LogoSpinner />
</div>
);

2
apps/web/core/lib/b-progress/AppProgressBar.tsx
View File

@@ -60,7 +60,7 @@ const PROGRESS_CONFIG: Readonly<ProgressConfig> = {
* }
* ```
*/
export function AppProgressBar(): null {
export default function AppProgressBar(): null {
const navigation = useNavigation();
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const startedRef = useRef<boolean>(false);

1
apps/web/core/lib/b-progress/index.tsx
View File

@@ -1 +0,0 @@
export * from "./AppProgressBar";

4
apps/web/core/lib/wrappers/instance-wrapper.tsx
View File

@@ -11,7 +11,7 @@ type TInstanceWrapper = {
children: ReactNode;
};
export const InstanceWrapper = observer(function InstanceWrapper(props: TInstanceWrapper) {
const InstanceWrapper = observer(function InstanceWrapper(props: TInstanceWrapper) {
const { children } = props;
// store
const { isLoading, instance, error, fetchInstanceInfo } = useInstance();
@@ -40,3 +40,5 @@ export const InstanceWrapper = observer(function InstanceWrapper(props: TInstanc
return <>{children}</>;
});
export default InstanceWrapper;