Fix: Flicker on page load

[dixita0607]

In some chromium based browsers, and mobile browsers, the theme flicker happens if the device theme is set to dark and landing on the website has 'automatic' theme setting.

Before
The flickering starts after 7s in the video.
https://github.com/user-attachments/assets/b2e1a2ec-e610-42de-9ab2-6f3c0a2123a4

About the Changes:
Moved the script that already handles the flash case before the main page contents is loaded.

After
https://github.com/user-attachments/assets/484ed6d1-5822-4fc8-ad2d-4beb3dd45ce8

---

• I’ve reviewed the contributor guide and applied the relevant portions to this PR.
• This PR doesn't contain automatically generated corrections or text (Grammarly, LLMs, and similar).
• This PR follows the Google Developer Documentation Style Guidelines — for example, it doesn't use i.e. or e.g., and it avoids I and we (first person).
• This PR uses semantic line breaks of 80 characters or fewer.

Contribution guidelines:

• See our contributor guide for general expectations for PRs.
• Larger or significant changes should be discussed in an issue before creating a PR.
• Code changes should generally follow the Dart style guide and use dart format.
• Updates to code excerpts indicated by <?code-excerpt need to be updated in their source .dart file as well.

[gemini-code-assist]

Summary of Changes

Hello @dixita0607, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a visual bug where the website's theme would briefly flicker on page load, especially for users with dark mode enabled on their devices and the site configured for an 'automatic' theme. The solution involves reordering the execution of the theme-setting JavaScript to ensure it runs before the main content renders, thereby applying the correct theme immediately and preventing the temporary display of an incorrect theme.

Highlights

• Flicker Fix: Resolved a visual flicker issue that occurred on page load, particularly in Chromium-based and mobile browsers when the device theme was set to dark and the website's theme was 'automatic'.
• Script Reordering: The JavaScript responsible for setting the theme has been moved to execute earlier in the page loading process, ensuring the correct theme is applied before the main content renders.
• Debugging Aid: A console.log statement was added within the theme-setting script to assist with debugging theme application.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively addresses the theme flicker issue by strategically moving the theme-setting JavaScript snippet to an earlier position in the HTML structure. This change ensures that the theme is applied before the main page content loads, significantly improving the user experience on initial page render. The approach taken is sound for mitigating FOUC (Flash of Unstyled Content) related to theme changes.

[parlough]

/gcbrun

[dart-github-bot]

Visit the preview URL for this PR (updated for commit 174afab):

https://dart-dev--pr7007-fix-blink-on-page-switch-jnbi6a2i.web.app

[parlough]

Thanks for improving this, looks good to me! I appreciate it :D

If you are interested, would you mind updating the Flutter docs website as well? We haven't started sharing this logic yet.

[dixita0607]

If you are interested, would you mind updating the Flutter docs website as well? We haven't started sharing this logic yet.

Sure. I can take that :)