From d2b760aabe557ad8bdc63896f1d5ba01a83c6dda Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 26 Mar 2026 16:15:12 +0000 Subject: [PATCH 1/4] fix: remove Suspense wrapper from hero splash logo to prevent CLS The LazyBrandContextMenu Suspense boundary caused layout shift on page load as the fallback div swapped to the loaded component. Since both rendered the same images, replace with direct rendering. --- src/routes/index.tsx | 75 ++++++++++++-------------------------------- 1 file changed, 20 insertions(+), 55 deletions(-) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index a4c46a87..659e09fd 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -28,12 +28,6 @@ import LibraryCard from '~/components/LibraryCard' import { FeaturedShowcases } from '~/components/ShowcaseSection' import { Button } from '~/ui' -const LazyBrandContextMenu = React.lazy(() => - import('~/components/BrandContextMenu').then((m) => ({ - default: m.BrandContextMenu, - })), -) - export const textColors = [ `text-rose-500`, `text-yellow-500`, @@ -127,55 +121,26 @@ function Index() { /> - - - - - } - > - - - - - + +
From e06362b244b7f2d5c6365fa95adf7fbcef376a2e Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 26 Mar 2026 16:33:18 +0000 Subject: [PATCH 2/4] fix: use single splash image, remove hidden dark variant Only one splash image is visible per theme but both were fetched eagerly. Keep only the light variant (works in both themes) to avoid wasting bandwidth on a hidden image. --- src/routes/index.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 659e09fd..d04f6dcc 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -126,17 +126,7 @@ function Index() { width={500} height={500} quality={85} - className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] dark:hidden" - alt="TanStack Logo" - loading="eager" - fetchPriority="high" - /> - Date: Thu, 26 Mar 2026 16:58:04 +0000 Subject: [PATCH 3/4] fix: restore dark-mode splash with lazy loading Re-add the dark variant splash image with loading="lazy" so it doesn't compete with the light image for bandwidth. Light image stays eager for LCP; dark image loads on demand when dark mode is active. --- src/routes/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index d04f6dcc..25f0eff5 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -126,11 +126,20 @@ function Index() { width={500} height={500} quality={85} - className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px]" + className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] dark:hidden" alt="TanStack Logo" loading="eager" fetchPriority="high" /> +
From c35c8f4d23381c1d3c4d882106596f9d1af6c522 Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 26 Mar 2026 19:33:07 +0000 Subject: [PATCH 4/4] fix: restore BrandContextMenu as direct import (no lazy/Suspense) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Keep the right-click brand actions on the hero splash logo while still eliminating the Suspense fallbackā†’loaded layout shift that caused CLS. The component is now a normal import instead of React.lazy, so it renders on the first pass with no swap. --- src/routes/index.tsx | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 25f0eff5..8c9d43d8 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -27,6 +27,7 @@ import { Card } from '~/components/Card' import LibraryCard from '~/components/LibraryCard' import { FeaturedShowcases } from '~/components/ShowcaseSection' import { Button } from '~/ui' +import { BrandContextMenu } from '~/components/BrandContextMenu' export const textColors = [ `text-rose-500`, @@ -121,25 +122,27 @@ function Index() { /> - - + + + +