Skip to content

fix(www): load the homepage without a white band or a heavy footer - #2384

Merged
AnishSarkar22 merged 5 commits into
MODSetter:devfrom
AnishSarkar22:fix/www-home-loading
Nov 2, 2026
Merged

AnishSarkar22 merged 5 commits into
MODSetter:devfrom
AnishSarkar22:fix/www-home-loading

Conversation

@AnishSarkar22

@AnishSarkar22 AnishSarkar22 commented Nov 2, 2026 •

Copy link
Copy Markdown
Collaborator

What

Fixes how the homepage looks while it loads, makes the footer cheaper to draw, and updates the plugins copy.

  • White band under the nav: the (home) layout now renders the site design directly, as a server component. components/site/site-shell.tsx, which picked the design from usePathname(), is deleted, and the page comments that pointed at its SITE_DESIGN_ROUTES list now point at the layout.
  • Hero while loading: a gradient of the scene's own sky, haze and ground shows until the image arrives, in place of the placeholder="blur" preview.
  • Footer scene: replaced with a 2172×724 version of the same drawing, with slightly darker lines. Its blur preview is removed, and the footer has content-visibility: auto.
  • Plugins copy: names Reddit and Instagram, so the count reads ten, not eight. "Open by pull request" becomes "Open to everyone", in plain words.

Why

  • White band: the cached HTML for / came back without .ss-home, because usePathname() read wrong on the server for the root route. Every route under (home) already uses the site design, so the path check had no routes left to serve. Until the page's JavaScript loaded, the hero sat inside an overflow-x-hidden wrapper that cut off its -mt-20 pull-up under the nav, and a white band showed there. /pricing, /plugins and /blog were not affected.
  • Footer lag: the 4344px footer scene made every screen decode a 3840×1280 bitmap (about 20MB). Phones did too, through the 360vw sizing. The page stuttered while scrolling to the footer. The new source caps that at 2172×724 (about 6MB).
  • Blur previews: the blur preview is an SVG filter painted at full width, which is costly on both images.

Fixes # (none)

How to test

cd www && pnpm install
cd www && pnpm build
cd www && pnpm start
  1. Check the HTML next build writes for the homepage, .next/server/app/index.html: <main> has ss-home, and there's no overflow-x-hidden wrapper.
  2. Load / with network throttling on. The area under the nav shows the hero's blue sky, never white, and the nav's logo is visible.
  3. Scroll to the footer on a phone-sized window and on a retina desktop. Scrolling stays smooth, and the bridge's lines look sharp enough.
  4. In the plugins section, the list names Reddit and Instagram, and the second point reads "Open to everyone".
  5. Run cd www && pnpm test:unit.

High-level PR Summary

This PR fixes three performance and visual issues on the homepage. It eliminates a white band that appeared under the navigation while the page loaded by refactoring the layout to render the site design directly as a server component instead of relying on client-side usePathname() checks. It reduces footer rendering cost by replacing the 4344×1280px footer scene with a 2172×724px version and removing expensive blur preview filters. Finally, it updates the hero section to show a gradient placeholder instead of a blur preview until the image loads, and updates the plugins copy to mention Reddit and Instagram (bringing the count to ten platforms).

⏱️ Estimated Review Time: 30-90 minutes

💡 Review Order Suggestion
Order File Path
1 www/app/(home)/layout.tsx
2 www/components/site/site-shell.tsx
3 www/app/(home)/_home/home-scene.tsx
4 www/components/site/site-footer.tsx
5 www/components/site/site-footer-scene.webp
6 www/app/(home)/_home/home-content.ts
7 www/AGENTS.md
8 www/app/(home)/announcements/[slug]/page.tsx
9 www/app/(home)/announcements/page.tsx
10 www/app/(home)/contact/page.tsx
11 www/app/(home)/downloads/page.tsx
12 www/app/(home)/free/[model_slug]/page.tsx
13 www/app/(home)/free/page.tsx
14 www/app/(home)/license/activate/page.tsx
15 www/app/(home)/license/page.tsx
16 www/app/(home)/plugins/page.tsx
17 www/app/(home)/pricing/individual/page.tsx
18 www/app/(home)/privacy/page.tsx
19 www/app/(home)/terms/page.tsx

Need help? Join our Discord

The cached HTML for / came back without .ss-home: SiteShell chose the
design from usePathname, which read wrong on the server for the root
route. Until hydration the hero sat in an overflow-x-hidden wrapper that
clipped its -mt-20 pull-up, so a white band showed under the nav.

Every route under (home) is on the site design and /login and /register
are gone, so the branch had no routes left. The layout now renders the
design directly as a server component, and the page comments that
pointed at SITE_DESIGN_ROUTES point at the layout.
The blur placeholder is an SVG filter painted at full width; a gradient
of the scene's own sky, haze and ground now stands in instead, so the
white copy is readable from the first paint.
The 4344px master made every screen decode a 3840x1280 bitmap, phones
included through the 360vw offset, and it stuttered mid-scroll. The
scene is now 2172x724 with darker lines that hold up when stretched, a
quarter of the pixels. The blur placeholder goes, and content-visibility
skips the footer's layout and paint until it nears the screen.
The plugins row showed both logos while the copy listed eight plugins;
ten ship, so the count and list now match it.
"Open by pull request" and "code in the public repo" read as written for
developers; the point now says every plugin is open source and anyone
can add their own MCP server to the registry.
@vercel

vercel Bot commented Nov 2, 2026

Copy link
Copy Markdown

@AnishSarkar22 is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Nov 2, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

Caution

Review failed

The pull request is closed.

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

@AnishSarkar22
AnishSarkar22 merged commit 2031a3e into MODSetter:dev Nov 2, 2026
28 of 30 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant