Unexpected brief Flicker of Website Last Updated Text and Dark mode Icon on Page Load in 404 page

[Codex-Bugmenot]

Describe the bug

When the 404 page loads after brief moment the website last updated text and the dark mode icon change(and the text ctrl +k in the search bar) .

To reproduce

1. Go to an 404 page , i used "https://ethereum.org/en/1"
2. Now click reload (keep an eye on either the website last updated text or dark mode sun/moon icon or the search bar)
3. After a brief moment they change
4. repeat step 2 again and again to see them change clearly

Expected behavior

1.Page should load with a single date format
2.Page should load with selected darkmode icon (either sun or moon)

Screenshots

Desktop (please complete the following information)

-Browser : Brave (Chromium build)

Smartphone (please complete the following information)

-Browser : Brave (Chromium build)

Additional context

observe that in the screen shots the date uses two different formats

month dd , year
dd month year
( two different formats used)

Would you like to work on this issue?

• Yes
• No

[tomasgrusz]

Hey! Hmm, I'm not sure how this would be changed. I believe this happens on every page when you reload it. Cannot confirm for certain if that's the case for ethereum.org, but from my experience, what probably happens:

1. pages are pre-generated during build, therefore the client is served HTML content
2. Once loaded, the browser determines dark/light mode from browser prefer config or local storage
3. Page updates icons (and maybe date) to correct option

This doesn't happen when you navigate through the page, because the navigation is taken care of by Next.js (no further calculations needed for dark mode/date format).

You can see the same on this page where ETH price is briefly in loading state after visit.

Maybe someone from core devs could advise, but I don't think this behaviour can be stopped as it executes after the page is loaded.

One possible option would be to hide the date/icon until it's determined to be the correct format/option.

Happy to help with this depending on the comments from core devs.

[Codex-Bugmenot]

The flicker for dark mode icon happens only if sun icon is the active one, if the moon is active there's no flicker for the icon.

[wackerow]

Can confirm I'm getting the same behavior. And yes, this is likely related to how pages are built on the server and then sent to the user before it knows some details like color mode... cc @pettinarip Do you know if this is a known Chakra or Next.js bug? Can think about how we could solve this.

@Codex-Bugmenot I see you checked no for wanting to work on this.. @tomasgrusz any chance you'd like to give it a shot?

[tomasgrusz]

@tomasgrusz any chance you'd like to give it a shot?

Yeah, I can take a look at it. 👍

[Codex-Bugmenot]

@tomasgrusz i have found a website powered by "hashnode" which uses similar icons, want me to link it here?( it may be of help as a reference)