Window Briefly Flashes White While Launching

[elsiehupp]

Expected Behavior

When Element Desktop is launching and the window first appears, the window should show the user interface (e.g. a loading screen or similar).

Actual Behavior

When Element Desktop is launching and the window first appears, the window briefly flashes white before the loading animation is shown.

I have uploaded a short screen recording of the issue to YouTube.

Steps to reproduce

Launch Element Desktop when it is not already running.

(The white flash may present itself in other situations, as well.)

Version Information

• Operating system: macOS 11.5.2
• Element version: 1.8.5
• Installed from https://element.io/get-started
• Homeserver: matrix.org
• rageshake not submitted

Commentary

The white flash when launching an Electron application is a known issue that should be easy to fix. The white flash occurs because the BrowserWindow instance is shown before the CSS is done loading, and one way of fixing the issue is using a ready-to-show event and waiting to show the BrowserWindow until after the CSS is done loading.

More detailed instructions can be found here.

Related Issues

I filed a fresh bug report because no one has previously created a bug report about the white flash at startup. However, people have mentioned similar behavior ambiguously or in slightly different contexts, which I will link below:

• Light theme is used before setting the dark theme (not quite the same issue because it involves the loading screen using the wrong theme)
• White screen of welcome when upgrading Riot can be confusing (extremely vague bug report that may or may not be the same thing)
• Element starts with white screen (exactly the same issue I'm seeing, but closed because it was blamed on Snap)
• Loader looks bad in dark mode (also about the loading screen theme, not the blank screen before the loading screen)
• Use system theme by default (white flash mentioned in comment thread)

[pedr0luiz]

@gsouquet
Developing a solution for this issue! Is that ok?

[SimonBrandner]

@gsouquet Developing a solution for this issue! Is that ok?

Awesome!

[elsiehupp]

As an aside, it may be worth revisiting the other issues I linked in my initial comment if or when this gets merged, since fixing this may fix some of them, as well.

[AppTester7]

Element occasionally goes to a completely white screen for no apparent reason at all even if i dont do anything
requiring me to quit and re-start the app

I do not usually get element going to a white screen/window upon startup
This also occasionally happens whenever i goto another room before the contents of the current room are 100% updated in the window - The issue appears to be a timing related one

OS: Linux
DE: KDE Plasma - Wayland

[elsiehupp]

Hi @AppTester7—there are a number of other issues related to a white screen. One of them might be a closer fit for what you’re experiencing and might be more productive for you to engage with than this one. This issue is related to a very specific behavior with the application hardcoding a white background at startup; if this issue is closed, what might end up happening is that the blank window would just not necessarily be white, but it wouldn’t solve the blank window in and of itself.

[germain-gg]

Unassigning @pedr0luiz as it seems that their PR has gone stale

[ttheshreeyasingh]

Hi, can I please be assigned this issue?

[SimonBrandner]

Hi, can I please be assigned this issue?

There is already a PR assigned to this issue, sorry

[ttheshreeyasingh]

There is already a PR assigned to this issue, sorry

That PR has gone stale and the user was unassigned as the required changes weren't made, the colors were hardcoded in the existing PR solution and thus, PR wasn't merged, maybe I could work on the changes required?

[SimonBrandner]

There is already a PR assigned to this issue, sorry

That PR has gone stale and the user was unassigned as the required changes weren't made, the colors were hardcoded in the existing PR solution and thus, PR wasn't merged, maybe I could work on the changes required?

Ah, sorry! I've assigned you to the issue. If you need any help/have any questions be sure to visit #element-dev:matrix.org!

[elsiehupp]

@ttheshreeyasingh if it's any help, you could take a look at my comments on @pedr0luiz's stalled pull request. Basically my impression is that in order to make the colors available during the pre-startup phase, you would probably need to pre-cache them (along with the theming mode) before quitting the previous time. In particular you could copy functionality from electron-window-state.

[elsiehupp]

@ttheshreeyasingh and if you end up extending electron-window-state you could do something like my WIP pull request over on their repository (assuming your version actually works). Granted, my pull request over there has not received any response, so it may instead be worth publishing a fork (if you can't get in touch with the electron-window-state developers).

[elsiehupp]

According to the electron-window-state developer's personal website, his contact email is [email protected].

[ttheshreeyasingh]

@ttheshreeyasingh and if you end up extending electron-window-state you could do something like my WIP pull request over on their repository (assuming your version actually works). Granted, my pull request over there has not received any response, so it may instead be worth publishing a fork (if you can't get in touch with the electron-window-state developers).

I'm unable to understand why the ready-to-show event fails to work when it should effectively solve the issue? Could you elaborate on why the ready-to-show event fails?

[elsiehupp]

I'm unable to understand why the ready-to-show event fails to work when it should effectively solve the issue? Could you elaborate on why the ready-to-show event fails?

If I remember correctly I wasn't the one who was testing the ready-to-show event. I don't remember the details, so the comments here and on the stalled pull request are honestly all I have to work with, too.

It looks like the sticking point was how to avoid hardcoding the background colors, which @pedr0luiz did as a backup strategy after he said the ready-to-show event wasn't working for him. I guess if you can get the ready-to-show event to work, then that's great!

(The changes to electron-window-state are mainly nice as a contribution to the wider Electron ecosystem, so that other applications that haven't figured out the ready-to-show event can get background-color restoration as a freebie.)

[ttheshreeyasingh]

I'm unable to understand why the ready-to-show event fails to work when it should effectively solve the issue? Could you elaborate on why the ready-to-show event fails?

If I remember correctly I wasn't the one who was testing the ready-to-show event. I don't remember the details, so the comments here and on the stalled pull request are honestly all I have to work with, too.

It looks like the sticking point was how to avoid hardcoding the background colors, which @pedr0luiz did as a backup strategy after he said the ready-to-show event wasn't working for him. I guess if you can get the ready-to-show event to work, then that's great!

(The changes to electron-window-state are mainly nice as a contribution to the wider Electron ecosystem, so that other applications that haven't figured out the ready-to-show event can get background-color restoration as a freebie.)

I see, thanks for all the guidance! will try to get the ready-to-show event work