Fix: Resolve theme toggle FOUC issue on slow connections #47
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Added critical inline CSS in BaseLayout.astro to style theme toggle immediately - Enhanced ThemeSwitcher skeleton state with proper sizing to prevent layout shift - Added id='theme-switcher-container' and 'theme-active' class for CSS targeting - Ensures theme toggle appears correctly sized from first paint - Prevents Flash of Unstyled Content (FOUC) on slow network connections - Includes comprehensive documentation in FOUC_FIX.md
Contributor
|
Hi thanks for the PR, will check in a while |
lovestaco
reviewed
Oct 16, 2025
| <div id="theme-switcher-container" className="grid grid-cols-1"> | ||
| <div className="relative z-0 inline-grid grid-cols-2 gap-0.5 rounded-full bg-gray-950/5 p-0.5 sm:p-0.75 text-gray-950 dark:bg-white/10 dark:text-white"> | ||
| <div className="relative rounded-full p-0.5 sm:p-1 lg:p-1 theme-active"> | ||
| <svg viewBox="0 0 28 28" fill="none" className="size-4 sm:size-5 lg:size-6"> |
Contributor
There was a problem hiding this comment.
Is hardcoding the svg in file required? We have many lucide icons,
if its absolutely required, pls put it in public dir and use its url
<img src="/freedevtools/svg_icons/comet/moon.svg">
Ex: https://hexmos.com/freedevtools/svg_icons/comet/moon.svg
lovestaco
reviewed
Oct 16, 2025
FOUC_FIX.md
Outdated
| The dark mode/light mode theme toggle button appeared large and unstyled during initial page load on slow network connections, causing a "Flash of Unstyled Content" (FOUC). | ||
|
|
||
| ## Root Cause | ||
| The theme toggle button was rendering before the main CSS stylesheet (`global.css`) loaded. This caused the SVG icons to display at their default size without proper styling, creating a jarring visual experience. |
Contributor
There was a problem hiding this comment.
Pls add the description in PR itself and rm this file.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#38
Theme Toggle FOUC Fix
Problem
The dark mode/light mode theme toggle button appeared large and unstyled during initial page load on slow network connections, causing a "Flash of Unstyled Content" (FOUC).
Root Cause
The theme toggle button was rendering before the main CSS stylesheet (
global.css) loaded. This caused the SVG icons to display at their default size without proper styling, creating a jarring visual experience.