binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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 { lazy, Suspense } from "react";
import { useTheme, ThemeProvider } from "next-themes"; import { useTheme } from "next-themes";
import { SWRConfig } from "swr"; import { SWRConfig } from "swr";
// Plane Imports // Plane Imports
import { WEB_SWR_CONFIG } from "@plane/constants"; import { WEB_SWR_CONFIG } from "@plane/constants";
@ -9,44 +9,45 @@ import { Toast } from "@plane/propel/toast";
import { resolveGeneralTheme } from "@plane/utils"; import { resolveGeneralTheme } from "@plane/utils";
// polyfills // polyfills
import "@/lib/polyfills"; import "@/lib/polyfills";
// progress bar
import { AppProgressBar } from "@/lib/b-progress";
// mobx store provider // mobx store provider
import { StoreProvider } from "@/lib/store-context"; import { StoreProvider } from "@/lib/store-context";
// wrappers
import { InstanceWrapper } from "@/lib/wrappers/instance-wrapper";
// lazy imports // lazy imports
const AppProgressBar = lazy(function AppProgressBar() {
return import("@/lib/b-progress/AppProgressBar");
});
const StoreWrapper = lazy(function StoreWrapper() { const StoreWrapper = lazy(function StoreWrapper() {
return import("@/lib/wrappers/store-wrapper"); return import("@/lib/wrappers/store-wrapper");
}); });
const PostHogProvider = lazy(function PostHogProvider() { const InstanceWrapper = lazy(function InstanceWrapper() {
return import("@/lib/posthog-provider"); return import("@/lib/wrappers/instance-wrapper");
}); });
const ChatSupportModal = lazy(function ChatSupportModal() { const ChatSupportModal = lazy(function ChatSupportModal() {
return import("@/components/global/chat-support-modal"); return import("@/components/global/chat-support-modal");
}); });
const PostHogProvider = lazy(function PostHogProvider() {
return import("@/lib/posthog-provider");
});
export interface IAppProvider { export interface IAppProvider {
children: React.ReactNode; children: React.ReactNode;
} }
function ToastWithTheme() {
const { resolvedTheme } = useTheme();
return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
}
export function AppProvider(props: IAppProvider) { export function AppProvider(props: IAppProvider) {
const { children } = props; const { children } = props;
// themes // themes
const { resolvedTheme } = useTheme();
return ( return (
<StoreProvider> <StoreProvider>
<ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system"> <>
<AppProgressBar /> <AppProgressBar />
<TranslationProvider> <TranslationProvider>
<ToastWithTheme /> <Toast theme={resolveGeneralTheme(resolvedTheme)} />
<StoreWrapper> <StoreWrapper>
<InstanceWrapper> <InstanceWrapper>
<Suspense> <Suspense>
@ -58,7 +59,7 @@ export function AppProvider(props: IAppProvider) {
</InstanceWrapper> </InstanceWrapper>
</StoreWrapper> </StoreWrapper>
</TranslationProvider> </TranslationProvider>
</ThemeProvider> </>
</StoreProvider> </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 Script from "next/script";
import { Links, Meta, Outlet, Scripts } from "react-router"; import { Links, Meta, Outlet, Scripts } from "react-router";
import type { LinksFunction } from "react-router"; import type { LinksFunction } from "react-router";
import { ThemeProvider, useTheme } from "next-themes";
// plane imports // plane imports
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants"; import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
import { cn } from "@plane/utils"; 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 icon180 from "@/app/assets/icons/icon-180x180.png?url";
import icon512 from "@/app/assets/icons/icon-512x512.png?url"; import icon512 from "@/app/assets/icons/icon-512x512.png?url";
import ogImage from "@/app/assets/og-image.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 globalStyles from "@/styles/globals.css?url";
import type { Route } from "./+types/root"; import type { Route } from "./+types/root";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
// local // local
import { CustomErrorComponent } from "./error"; import { CustomErrorComponent } from "./error";
import { AppProvider } from "./provider"; import { AppProvider } from "./provider";
@ -51,7 +53,7 @@ export function Layout({ children }: { children: ReactNode }) {
const isSessionRecorderEnabled = parseInt(process.env.VITE_ENABLE_SESSION_RECORDER || "0"); const isSessionRecorderEnabled = parseInt(process.env.VITE_ENABLE_SESSION_RECORDER || "0");
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -66,16 +68,12 @@ export function Layout({ children }: { children: ReactNode }) {
<Meta /> <Meta />
<Links /> <Links />
</head> </head>
<body> <body suppressHydrationWarning>
<div id="context-menu-portal" /> <div id="context-menu-portal" />
<div id="editor-portal" /> <div id="editor-portal" />
<AppProvider> <ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">
<div {children}
className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "desktop-app-container")} </ThemeProvider>
>
<main className="w-full h-full overflow-hidden relative">{children}</main>
</div>
</AppProvider>
<Scripts /> <Scripts />
{!!isSessionRecorderEnabled && process.env.VITE_SESSION_RECORDER_KEY && ( {!!isSessionRecorderEnabled && process.env.VITE_SESSION_RECORDER_KEY && (
<Script id="clarity-tracking"> <Script id="clarity-tracking">
@ -118,12 +116,25 @@ export const meta: Route.MetaFunction = () => [
]; ];
export default function Root() { 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() { 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 ( 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 /> <LogoSpinner />
</div> </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 navigation = useNavigation();
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null); const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const startedRef = useRef<boolean>(false); 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; children: ReactNode;
}; };
export const InstanceWrapper = observer(function InstanceWrapper(props: TInstanceWrapper) { const InstanceWrapper = observer(function InstanceWrapper(props: TInstanceWrapper) {
const { children } = props; const { children } = props;
// store // store
const { isLoading, instance, error, fetchInstanceInfo } = useInstance(); const { isLoading, instance, error, fetchInstanceInfo } = useInstance();
@ -40,3 +40,5 @@ export const InstanceWrapper = observer(function InstanceWrapper(props: TInstanc
return <>{children}</>; return <>{children}</>;
}); });
export default InstanceWrapper;