Skip to content

Fix: Prevent theme flicker on initial render#135

Open
pandaabinash99 wants to merge 5 commits intoHydPy:mainfrom
pandaabinash99:bugfix/32-dark-theme-flicker-on-initial-load
Open

Fix: Prevent theme flicker on initial render#135
pandaabinash99 wants to merge 5 commits intoHydPy:mainfrom
pandaabinash99:bugfix/32-dark-theme-flicker-on-initial-load

Conversation

@pandaabinash99
Copy link
Contributor

Summary:

This update ensures the correct theme (light/dark) is applied before the first paint, preventing the flicker that occurred during initial page load.

  • Added a small inline script in layout.js to set the theme class on the element before React hydration.
  • Simplified ThemeProvider logic to avoid redundant theme initialization in useEffect.
  • Improved overall user experience and visual consistency on page load.

Issue Link:

Fixes #32

PR Checks:

  • Code is properly formatted (executed make pre-push command).
  • No ESLint warnings (verified with make pre-push command).
  • UI Changes are responsive (checked in the responsive view).
  • Performance is maintained (Lighthouse report reviewed).
  • User experience (UX) considerations are met.
  • Accessibility is supported (validated with accessibility tools).

className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
aria-label="Toggle theme"
>
<Icon name="Moon" size={24} className="text-gray-800" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the application is reloaded while already in Dark Mode, the Moon icon briefly appears before switching to the Sun icon.
Ideally, the Sun icon should be displayed immediately.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The build is failing locally, could you check and confirm?

Command: npm run build

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.

Dark theme screen flickering

2 participants