Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: remove flicker on page load on dark theme #50942

Merged
merged 1 commit into from
Nov 27, 2023

Conversation

demakoff
Copy link
Contributor

@demakoff demakoff commented Nov 27, 2023

Theme applying logic gets loaded and executed in async mode, so often there is a
delay in applying the proper theme to a page which leads to flicker on dark theme.

Resolved by moving critical logic to the page head (sync script). No impact on performance was detected.

Before:
UI
flicker_before

Performance

image

After:

UI
flicker_after

Performance

image

Theme applying logic get loaded and executed in async mode, so often
there is a
delay in applying the proper theme to a page which leads to flicker on
dark theme. Resolved by moving critical logic to the page head
@nodejs-github-bot
Copy link
Collaborator

Review requested:

  • @nodejs/nodejs-website

@nodejs-github-bot nodejs-github-bot added the doc Issues and PRs related to the documentations. label Nov 27, 2023
Copy link
Member

@ovflowd ovflowd left a comment

Choose a reason for hiding this comment

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

This whole thing feels hacky, but hey, the whole codebase has been long-time hacky.

@ovflowd ovflowd added the fast-track PRs that do not need to wait for 48 hours to land. label Nov 27, 2023
Copy link
Contributor

Fast-track has been requested by @ovflowd. Please 👍 to approve.

@ovflowd ovflowd added the commit-queue Add this label to land a pull request using GitHub Actions. label Nov 27, 2023
@nodejs-github-bot nodejs-github-bot removed the commit-queue Add this label to land a pull request using GitHub Actions. label Nov 27, 2023
@nodejs-github-bot nodejs-github-bot merged commit d42949e into nodejs:main Nov 27, 2023
23 checks passed
@nodejs-github-bot
Copy link
Collaborator

Landed in d42949e

@demakoff demakoff deleted the no-flicker-on-load branch November 27, 2023 16:18
targos pushed a commit that referenced this pull request Dec 4, 2023
Theme applying logic get loaded and executed in async mode, so often
there is a
delay in applying the proper theme to a page which leads to flicker on
dark theme. Resolved by moving critical logic to the page head

PR-URL: #50942
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
@targos targos mentioned this pull request Dec 4, 2023
richardlau pushed a commit that referenced this pull request Mar 25, 2024
Theme applying logic get loaded and executed in async mode, so often
there is a
delay in applying the proper theme to a page which leads to flicker on
dark theme. Resolved by moving critical logic to the page head

PR-URL: #50942
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
@richardlau richardlau mentioned this pull request Mar 25, 2024
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
doc Issues and PRs related to the documentations. fast-track PRs that do not need to wait for 48 hours to land.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants