From 27a7cdcfc3cccacd0a640ad35f4bd1561cde9207 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 24 Dec 2025 17:29:27 +0530
Subject: [PATCH] [WEB-5581] fix: resolve logo spinner hydration and theme
 loading issues (#8450)

- Fix hydration mismatch by lazy loading components that depend on theme
- Ensure LogoSpinner renders with correct theme on initial load
---
 apps/web/app/provider.tsx                     | 31 ++++++++--------
 apps/web/app/root.tsx                         | 35 ++++++++++++-------
 .../core/lib/b-progress/AppProgressBar.tsx    |  2 +-
 apps/web/core/lib/b-progress/index.tsx        |  1 -
 .../core/lib/wrappers/instance-wrapper.tsx    |  4 ++-
 5 files changed, 43 insertions(+), 30 deletions(-)
 delete mode 100644 apps/web/core/lib/b-progress/index.tsx

diff --git a/apps/web/app/provider.tsx b/apps/web/app/provider.tsx
index 7d6811052c..4d23fed9d3 100644
--- a/apps/web/app/provider.tsx
+++ b/apps/web/app/provider.tsx
@@ -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>
   );
 }
diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
index 7ce3d16ff5..2fbfd46c64 100644
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -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>
   );
diff --git a/apps/web/core/lib/b-progress/AppProgressBar.tsx b/apps/web/core/lib/b-progress/AppProgressBar.tsx
index 7ad93fc11b..b07f0ffb28 100644
--- a/apps/web/core/lib/b-progress/AppProgressBar.tsx
+++ b/apps/web/core/lib/b-progress/AppProgressBar.tsx
@@ -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);
diff --git a/apps/web/core/lib/b-progress/index.tsx b/apps/web/core/lib/b-progress/index.tsx
deleted file mode 100644
index 7b531da2b2..0000000000
--- a/apps/web/core/lib/b-progress/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./AppProgressBar";
diff --git a/apps/web/core/lib/wrappers/instance-wrapper.tsx b/apps/web/core/lib/wrappers/instance-wrapper.tsx
index 817ebc7196..fb082107fa 100644
--- a/apps/web/core/lib/wrappers/instance-wrapper.tsx
+++ b/apps/web/core/lib/wrappers/instance-wrapper.tsx
@@ -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;