Theme loading without flickering #2233
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Signed-off-by: Timo K <toger5@hotmail.de>
Signed-off-by: Timo K <toger5@hotmail.de>
Signed-off-by: Timo K <toger5@hotmail.de>
Signed-off-by: Timo K <toger5@hotmail.de>
Signed-off-by: Timo K <toger5@hotmail.de>
Signed-off-by: Timo K <toger5@hotmail.de>
robintown
reviewed
Mar 12, 2024
robintown
approved these changes
Mar 12, 2024
public/index.html
Outdated
| @@ -13,7 +13,7 @@ | |||
| </script> | |||
| </head> | |||
|
|
|||
| <body class="cpd-theme-dark"> | |||
| <body class="nodisplay"> | |||
There was a problem hiding this comment.
Could we rename this class to something like no-theme so that it's more apparent that it's involved in the theme code?
There was a problem hiding this comment.
what about invisible-loading-theme (so its also clear that this class could be the reason why its not rendering anything.)
Signed-off-by: Timo K <toger5@hotmail.de>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The theme did flicker because there is a default theme shown before any JS is loaded.
When the layoutEffect from the useTheme hook is reached the theme gets updated -> If its a different theme ("light", "dark") one can see a very short flicker.
This is particularly annoying in widget mode.
To work around this we only send the contentLoaded action once the theme is set.
This relies on the js sdk not sending this action automatically AND the react sdk needs to be configured with waitForIframe=false, so that it does not consider the widget to be ready once the IFrame is loaded.
Until the content_loadedaction is sent (which now is equivalent to: until EC is loaded), we will not show the widget. Instead the EW loading screen is shown.
This also saves us from the flickering: EW widget loading screen -> EC normal screen with header -> EC loading screen -> EC lobby.
This relies on:
Js-sdk PR that allows to disable sending the content loaded action right after the client is initialized but before the first react update (default behaviour of the js sdk):
matrix-org/matrix-js-sdk#4086
EW PR that sets waitForIframe=false and shows the widget loading screen until the receiving the content_loaded action:
matrix-org/matrix-react-sdk#12292
Signed-off-by: Timo K toger5@hotmail.de
The type failiours will be fixed once matrix-org/matrix-js-sdk#4086 is merged.