UI: Flickering when loading themes on pages with long loading times #94706

New Issue

Márton Lente · 2024-09-27T12:15:34+02:00

Márton Lente commented

2024-09-27 12:15:34 +02:00

There is a flicker in loading the theme that is quite noticeable on pages heavy on images, like Speakers, Attendees, or Schedule.

This is not just a problem of our implementation but something many run into when introducing themes.

Some propose using a bit of inline Javascript (vanilla) in the <head>, before anything, which is probably the best. Outlined in this StackExchange answer or this GitHub comment.

Originally posted by @pablovazquez in infrastructure/conference-website#103972 (comment)

There is a flicker in loading the theme that is quite noticeable on pages heavy on images, like Speakers, Attendees, or Schedule. <video src="/attachments/cd3c3ac2-d7e9-4ee0-b8df-d16324b99fcd" title="slow_switch.mov" controls></video> This is not just a problem of our implementation but something many run into when introducing themes. Some propose using a bit of inline Javascript (vanilla) in the `<head>`, before anything, which is probably the best. Outlined in [this StackExchange answer](https://stackoverflow.com/a/62635541/8444393) or [this GitHub comment](https://github.com/vercel/next.js/discussions/12533#discussioncomment-6696252). _Originally posted by @pablovazquez in https://projects.blender.org/infrastructure/conference-website/pulls/103972#issuecomment-1303571_

Márton Lente referenced this issue from a commit

2024-09-27 13:05:45 +02:00

Util: Add dev-util js init-theme base

Márton Lente referenced this issue from a commit

2024-09-27 14:14:28 +02:00

Chore: Add package json script build js init-theme

Márton Lente referenced this issue from a commit

2024-09-27 14:15:15 +02:00

Chore: Commit dev-util js init-theme minified version

Márton Lente commented

2024-09-27 14:57:49 +02:00

To prevent fickering, a theme initialization JavaScript snippet (and its minified version) has been created and added to development utilities, that can be included in project templates' <head> as inline JS. The detailed usage instructions have been added to Web Assets wiki page section on Enabling themes as well.

The snippet initializes themes before the DOM has been loaded, and works like this in a nutshell:

It checks the dataTheme item in the localStorage.
If dataTheme is set, it assigns the according data-theme attribute to the <html> tag.
As the correct data-theme attribute is already present while loading the styles, the page colours are correctly rendered from start.
The snippet runs as an IIFE, and is self-contained. It doesn't conflict with the base theme system's JavaScript, that is compiled as part of the project's JS build pipeline.
Using the snippet is optional, and doesn't change how the base theme system is enabled.

The solution has been tested locally with throttling simulating slow networks, and seems to work reliably.

@pablovazquez ⌃

To prevent fickering, a theme initialization JavaScript [snippet](https://projects.blender.org/infrastructure/web-assets/src/branch/v2/dev-utils/init-theme.js) (and its [minified version](https://projects.blender.org/infrastructure/web-assets/src/branch/v2/dev-utils/init-theme.min.js)) has been created and added to development utilities, that can be included in project templates' `<head>` as inline JS. The detailed usage instructions have been added to Web Assets [wiki](https://projects.blender.org/infrastructure/web-assets/wiki/v2-guidelines-and-notes.md#enable-themes) page section on _Enabling themes_ as well. The snippet initializes themes before the DOM has been loaded, and works like this in a nutshell: - It checks the `dataTheme` item in the _localStorage_. - If `dataTheme` is set, it assigns the according `data-theme` attribute to the `<html>` tag. - As the correct `data-theme` attribute is already present while loading the styles, the page colours are correctly rendered from start. - The snippet runs as an IIFE, and is self-contained. It doesn't conflict with the base theme system's JavaScript, that is compiled as part of the project's JS build pipeline. - Using the snippet is optional, and doesn't change how the base theme system is enabled. The solution has been tested locally with throttling simulating slow networks, and seems to work reliably. @pablovazquez ⌃

❤️ 1

Márton Lente closed this issue

2024-09-27 14:57:49 +02:00

Márton Lente referenced this issue from infrastructure/conference-website

2024-09-27 15:31:33 +02:00

UI: Implement Web Assets' theme system, and add 'dark' theme #103972

Sign in to join this conversation.