Skip to content

fix: prevent white background flash on docs redirect pages#4356

Open
NicholasKissel wants to merge 2 commits intomainfrom
NicholasKissel/fix-docs-redirect-flash
Open

fix: prevent white background flash on docs redirect pages#4356
NicholasKissel wants to merge 2 commits intomainfrom
NicholasKissel/fix-docs-redirect-flash

Conversation

@NicholasKissel
Copy link
Member

Description

Fixes white background flash that occurs when the browser follows a meta-refresh redirect on the statically-built documentation site. The fix inlines the dark background color directly on the <html> element so it's applied immediately by the browser before stylesheets load. Additionally, a new post-build Astro integration injects the same styling into Astro's generated redirect HTML files that only contain a meta-refresh tag and aren't covered by the base layout.

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

The fix can be tested by:

  1. Building the website (pnpm build in the website directory)
  2. Serving the built static files and following a redirect link
  3. Observing that the dark background appears immediately instead of flashing white

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • My changes generate no new warnings

Inline dark background color on the html element so it's applied immediately by the browser before stylesheets load. Add a post-build Astro integration to inject the same styling into generated redirect pages that only contain a meta-refresh tag.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@railway-app
Copy link

railway-app bot commented Mar 4, 2026

🚅 Deployed to the rivet-pr-4356 environment in rivet-frontend

Service Status Web Updated (UTC)
website 😴 Sleeping (View Logs) Web Mar 12, 2026 at 2:13 pm
frontend-inspector 😴 Sleeping (View Logs) Web Mar 12, 2026 at 2:05 pm
frontend-cloud 😴 Sleeping (View Logs) Web Mar 4, 2026 at 10:24 pm
mcp-hub ✅ Success (View Logs) Web Mar 4, 2026 at 10:16 pm
ladle ❌ Build Failed (View Logs) Web Mar 4, 2026 at 10:15 pm

@claude
Copy link

claude bot commented Mar 4, 2026

PR Review: fix: prevent white background flash on docs redirect pages

Overall this is a clean, well-targeted fix for a real UX problem. The approach is correct - inlining the background color on the <html> element is the right way to prevent FOUC/flash on static redirect pages.

What is Good

  • Correct root cause fix: Adding style="background-color: #0c0a09" directly on the <html> element in BaseLayout.astro ensures the background is applied before stylesheets parse.
  • Custom /docs/index.astro replacing the Astro config redirect is a cleaner approach - the page controls its own dark background directly rather than relying on the generic post-processing hook.
  • fast-glob is already a dependency (^3.3.3 in package.json) so the new integration does not require additional packages.
  • URL cleanup: Updating all /docs links to /docs/actors directly avoids the redirect hop entirely for users, which is better than just fixing the flash.

Issues

Missing <title> in docs/index.astro

Even for a redirect page, a <title> tag is recommended - search engines and browser history entries will show a blank title. Consider adding <title>Redirecting...</title> or <title>Rivet Docs</title>.

Hardcoded color value duplicated across two files

The value #0c0a09 appears in both BaseLayout.astro and style-redirects.ts. If the background color ever changes, there are two places to update. A comment in one or both files pointing to the other would help future maintainers keep them in sync.

No error handling in the integration

If any file read/write fails in style-redirects.ts (permission error, disk full, etc.), the integration throws and may abort the build mid-run, leaving some files modified and others not. Wrapping the loop body in a try/catch with logger.warn would make the integration more resilient.

"Overview" label pointing to /docs/actors

In sitemap/mod.ts and v2/Header.tsx (DocsMobileNavigation), the entry labeled "Overview" now points to /docs/actors. "Overview" implies a landing/introduction page, but the destination is the actors-specific section. Since /docs redirects to /docs/actors/ anyway, keeping href: "/docs" here would preserve the semantic correctness of the label - or the label could be changed to "Documentation" or "Actors".

TechSection.tsx placeholder links

The OpenAPI and AsyncAPI links already had /docs as placeholders and are now updated to /docs/actors, which is still generic. This is pre-existing, but worth a follow-up to link to specific pages if and when they exist.

Summary

The core fix is sound and the implementation is clean. The main actionable items are the missing <title> on the redirect page and the "Overview" label mismatch. Error handling and color duplication are nice-to-haves.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 4, 2026

More templates

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4356

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4356

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4356

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4356

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4356

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4356

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4356

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4356

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4356

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4356

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4356

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4356

commit: 2019e78

…/docs links

Replace the Astro config redirect for /docs with a real page that renders
a dark background before redirecting, preventing white flash in both dev
and production. Update all internal /docs links to point directly to
/docs/actors to avoid the redirect entirely.
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