From 1d1b58b06b65ee89b8b29b8c1ad2f182545a6edf Mon Sep 17 00:00:00 2001
From: vimzh <vimzh.dev@gmail.com>
Date: Sun, 15 Mar 2026 02:01:56 +0530
Subject: [PATCH] fix: prevent header theme flash when toggling theme in footer

The footer's theme toggle was directly calling setHeaderTheme(), which
immediately set the header to the user's chosen theme. This caused the
navbar to briefly flash the wrong color before the IntersectionObserver
corrected it based on the currently visible section's actual theme.

The fix removes direct setHeaderTheme() calls from both Footer and
CloudFooter components. The global setTheme() already triggers the
observer recreation chain (via its dependency array), which determines
the correct header theme based on visible sections.

Also fixes a missing `theme` dependency in HeaderIntersectionObserver's
pathname-reset effect, ensuring the header updates when the global theme
preference changes.
---
 .../(cloud)/cloud/_components/CloudFooter/index.tsx           | 4 ----
 src/components/Footer/index.tsx                               | 4 ----
 src/providers/HeaderIntersectionObserver/index.tsx            | 2 +-
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/app/(frontend)/(cloud)/cloud/_components/CloudFooter/index.tsx b/src/app/(frontend)/(cloud)/cloud/_components/CloudFooter/index.tsx
index f4ead0137..b2bd0f920 100644
--- a/src/app/(frontend)/(cloud)/cloud/_components/CloudFooter/index.tsx
+++ b/src/app/(frontend)/(cloud)/cloud/_components/CloudFooter/index.tsx
@@ -8,7 +8,6 @@ import { ThemeDarkIcon } from '@root/graphics/ThemeDarkIcon/index'
 import { ThemeLightIcon } from '@root/graphics/ThemeLightIcon/index'
 import { ChevronUpDownIcon } from '@root/icons/ChevronUpDownIcon/index'
 import { useAuth } from '@root/providers/Auth/index'
-import { useHeaderObserver } from '@root/providers/HeaderIntersectionObserver/index'
 import { useThemePreference } from '@root/providers/Theme/index'
 import { getImplicitPreference, themeLocalStorageKey } from '@root/providers/Theme/shared'
 import Link from 'next/link'
@@ -22,19 +21,16 @@ export const CloudFooter = () => {
   const selectRef = React.useRef<HTMLSelectElement>(null)
   const themeId = useId()
   const { setTheme } = useThemePreference()
-  const { setHeaderTheme } = useHeaderObserver()
 
   const onThemeChange = (themeToSet: 'auto' & Theme) => {
     if (themeToSet === 'auto') {
       const implicitPreference = getImplicitPreference() ?? 'light'
-      setHeaderTheme(implicitPreference)
       setTheme(implicitPreference)
       if (selectRef.current) {
         selectRef.current.value = 'auto'
       }
     } else {
       setTheme(themeToSet)
-      setHeaderTheme(themeToSet)
     }
   }
 
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index b1b2636eb..a21e5ff24 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -21,7 +21,6 @@ import { ThemeLightIcon } from '@root/graphics/ThemeLightIcon/index'
 import { TwitterIconAlt } from '@root/graphics/TwitterIconAlt/index'
 import { YoutubeIcon } from '@root/graphics/YoutubeIcon/index'
 import { ChevronUpDownIcon } from '@root/icons/ChevronUpDownIcon/index'
-import { useHeaderObserver } from '@root/providers/HeaderIntersectionObserver/index'
 import { useThemePreference } from '@root/providers/Theme/index'
 import { getImplicitPreference, themeLocalStorageKey } from '@root/providers/Theme/shared'
 import { usePathname, useRouter } from 'next/navigation'
@@ -33,21 +32,18 @@ export const Footer: React.FC<FooterType> = (props) => {
   const { columns } = props
   const [products, developers, company] = columns ?? []
   const { setTheme } = useThemePreference()
-  const { setHeaderTheme } = useHeaderObserver()
   const wrapperRef = React.useRef<HTMLElement>(null)
   const selectRef = React.useRef<HTMLSelectElement>(null)
 
   const onThemeChange = (themeToSet: 'auto' & Theme) => {
     if (themeToSet === 'auto') {
       const implicitPreference = getImplicitPreference() ?? 'light'
-      setHeaderTheme(implicitPreference)
       setTheme(implicitPreference)
       if (selectRef.current) {
         selectRef.current.value = 'auto'
       }
     } else {
       setTheme(themeToSet)
-      setHeaderTheme(themeToSet)
     }
   }
 
diff --git a/src/providers/HeaderIntersectionObserver/index.tsx b/src/providers/HeaderIntersectionObserver/index.tsx
index 8eee9f25f..c0a746bc7 100644
--- a/src/providers/HeaderIntersectionObserver/index.tsx
+++ b/src/providers/HeaderIntersectionObserver/index.tsx
@@ -101,7 +101,7 @@ export const HeaderIntersectionObserver: React.FC<HeaderIntersectionObserverProp
 
   React.useEffect(() => {
     setHeaderTheme(theme)
-  }, [pathname])
+  }, [pathname, theme])
 
   return (
     <Context