From d09d83c889ca7b43cebdf88d4f892b1cb5bf0b32 Mon Sep 17 00:00:00 2001 From: vibemarketerpromax Date: Thu, 12 Feb 2026 18:11:54 +0530 Subject: [PATCH] fix: Fix MCLabs logo, service worker nav errors, and TracingBeam hydration bug - MCLabs SVG: Remove white background from embedded PNG so CSS filter brightness(0) invert(1) no longer renders it as invisible white rect - Service worker: Use network-first for navigation requests to prevent stale HTML from causing hydration mismatches on client-side nav - TracingBeam: Replace render-time scrollYProgress.get() with reactive useMotionValueEvent to eliminate SSR hydration mismatch --- components/ui/tracing-beam.tsx | 12 +++++++++--- public/logos/client/mclabs.svg | 12 +++--------- public/sw.js | 20 ++++++++++++++++++++ 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/components/ui/tracing-beam.tsx b/components/ui/tracing-beam.tsx index a06fafa..8e55553 100644 --- a/components/ui/tracing-beam.tsx +++ b/components/ui/tracing-beam.tsx @@ -5,6 +5,7 @@ import { useTransform, useScroll, useSpring, + useMotionValueEvent, } from "motion/react"; import { cn } from "@/lib/utils"; @@ -23,6 +24,11 @@ export const TracingBeam = ({ const contentRef = useRef(null); const [svgHeight, setSvgHeight] = useState(0); + const [hasScrolled, setHasScrolled] = useState(false); + + useMotionValueEvent(scrollYProgress, "change", (latest) => { + setHasScrolled(latest > 0); + }); // Use ResizeObserver to avoid forced reflows useEffect(() => { @@ -69,7 +75,7 @@ export const TracingBeam = ({ }} animate={{ boxShadow: - scrollYProgress.get() > 0 + hasScrolled ? "none" : "var(--shadow-tracing-beam, rgba(0, 0, 0, 0.24) 0px 3px 8px)", }} @@ -82,11 +88,11 @@ export const TracingBeam = ({ }} animate={{ backgroundColor: - scrollYProgress.get() > 0 + hasScrolled ? "var(--color-tracing-beam-dot-active)" : "var(--color-tracing-beam-dot-inactive)", borderColor: - scrollYProgress.get() > 0 + hasScrolled ? "var(--color-tracing-beam-border-active)" : "var(--color-tracing-beam-border-inactive)", }} diff --git a/public/logos/client/mclabs.svg b/public/logos/client/mclabs.svg index ad82fb8..2747131 100644 --- a/public/logos/client/mclabs.svg +++ b/public/logos/client/mclabs.svg @@ -1,9 +1,3 @@ - - - - - - - - - + + + \ No newline at end of file diff --git a/public/sw.js b/public/sw.js index e5d99ea..e73fb16 100644 --- a/public/sw.js +++ b/public/sw.js @@ -23,6 +23,7 @@ const CACHE_FIRST_PATTERNS = [ const NETWORK_FIRST_PATTERNS = [ /\/api\//, /\.json$/, + /\.txt$/, // Next.js RSC payloads ]; self.addEventListener('install', (event) => { @@ -94,6 +95,25 @@ self.addEventListener('fetch', (event) => { return; } + // Network-first for navigation requests (HTML pages) + // Prevents stale HTML from causing hydration mismatches during client-side nav + if (request.mode === 'navigate' || request.destination === 'document') { + event.respondWith( + fetch(request) + .then((response) => { + if (response.status === 200) { + const responseClone = response.clone(); + caches.open(CACHE_NAME).then((cache) => { + cache.put(request, responseClone); + }); + } + return response; + }) + .catch(() => caches.match(request)) + ); + return; + } + // Stale-while-revalidate for everything else event.respondWith( caches.match(request).then((cachedResponse) => {