BUG:Theme Toggle Button Appears Large and Unstyled on Page Load #38
Description
Bug Description
The dark mode/light mode theme toggle button appears very large and unstyled during the initial page load, especially on a slow network connection. This causes a noticeable "flash of unstyled content" (FOUC) before the site's CSS is fully applied.
Steps to Reproduce
- Use a device on a slow or throttled network connection.
- Go to
hexmos.com/freedevtools. - Watch the top-right corner of the page as it loads.
- See the large theme toggle button flash briefly before shrinking to its correct, styled size.
Expected Behavior
The theme toggle button should load in its final, styled state without appearing oversized. It should not cause a jarring layout shift during the page load.
Actual Behavior
A large, unstyled button is rendered first, which then quickly resizes once the stylesheet is applied. This is visually disruptive to the user.
Environment
- Browser: Chrome
- OS: Android
- Device: Mobile
- Tool: Not tool-specific; occurs on the main landing page.
Screenshots
The provided screen recording demonstrates the issue clearly. A key moment is when the large button is visible before the page's styles have loaded.
Screenrecorder-2025-10-08-18-55-32-588.mp4
Additional Context
This issue is a classic Flash of Unstyled Content (FOUC). It seems the HTML for the button is rendered before the CSS that defines its size and appearance is parsed by the browser.
Checklist
- I have searched existing issues to avoid duplicates
- I have provided all the requested information
- I can reproduce this issue consistently