Async style loading? #303

New Issue

claunia · 2026-01-29T16:36:05Z

claunia commented

2026-01-29 16:36:05 +00:00

Originally created by @pwasiewicz on GitHub (Apr 23, 2019).

Originally assigned to: @GregorBiswanger on GitHub.

When I attach whole bootstrap css and my custom css (just after bootstrap) with own coloring - I can observer strange behaviour:

It seems like css is applied after site is rendered and since bootstrap is quite heavy, effect is visible.

Can it be masked somehow?

Originally created by @pwasiewicz on GitHub (Apr 23, 2019). Originally assigned to: @GregorBiswanger on GitHub. When I attach whole bootstrap css and my custom css (just after bootstrap) with own coloring - I can observer strange behaviour: ![wVrP7w92Pb](https://user-images.githubusercontent.com/8725777/56602547-031f6b00-65fe-11e9-8cd4-bad9043fe7d7.gif) It seems like css is applied after site is rendered and since bootstrap is quite heavy, effect is visible. Can it be masked somehow?

claunia added the question label 2026-01-29 16:36:05 +00:00

claunia closed this issue

2026-01-29 16:36:06 +00:00

claunia commented

2026-01-29 16:36:06 +00:00

@GregorBiswanger commented on GitHub (May 16, 2019):

Please code a little hello world example that produces this problem and make it available to me. Then I can help you.

@GregorBiswanger commented on GitHub (May 16, 2019): Please code a little hello world example that produces this problem and make it available to me. Then I can help you.

claunia commented

2026-01-29 16:36:07 +00:00

@pwasiewicz commented on GitHub (May 19, 2019):

@GregorBiswanger I have created similar app: https://github.com/pwasiewicz/ElectronDrawIssue
It has the same problem - navbar is "flashing" during page render (it looks like page is rendered first and then styles applied).

@pwasiewicz commented on GitHub (May 19, 2019): @GregorBiswanger I have created similar app: https://github.com/pwasiewicz/ElectronDrawIssue It has the same problem - navbar is "flashing" during page render (it looks like page is rendered first and then styles applied). ![DNdsL8Ua5U](https://user-images.githubusercontent.com/8725777/57988798-93808c80-7a92-11e9-8fb4-c620bf2e79b4.gif)

claunia commented

2026-01-29 16:36:07 +00:00

@GregorBiswanger commented on GitHub (May 22, 2019):

Hey @pwasiewicz

I found some points for optimization:

Mainly a single-page app architecture is recommended. The classic MVC gives you a flicker effect.
Let your window show only when the content is ready. You can use the following code:

Task.Run(async () =>
{
    var browserWindowOptions = new BrowserWindowOptions
    {
        BackgroundColor = "#a9a9a9",
        Show = false
    };

    var browserWindow = await Electron.WindowManager.CreateWindowAsync(browserWindowOptions);
    browserWindow.OnReadyToShow += () =>
    {
        browserWindow.Show();
        browserWindow.Focus();
    };
});

It then takes a little longer until the window becomes visible. From the new Electron.NET version 5.22.12 you can set a splashscreen. See here the necessary electron.manifest.json: https://github.com/ElectronNET/Electron.NET/blob/master/ElectronNET.WebApp/electron.manifest.json

Could I help you?

@GregorBiswanger commented on GitHub (May 22, 2019): Hey @pwasiewicz I found some points for optimization: 1. Mainly a single-page app architecture is recommended. The classic MVC gives you a flicker effect. 2. Let your window show only when the content is ready. You can use the following code: ``` Task.Run(async () => { var browserWindowOptions = new BrowserWindowOptions { BackgroundColor = "#a9a9a9", Show = false }; var browserWindow = await Electron.WindowManager.CreateWindowAsync(browserWindowOptions); browserWindow.OnReadyToShow += () => { browserWindow.Show(); browserWindow.Focus(); }; }); ``` It then takes a little longer until the window becomes visible. From the new Electron.NET version 5.22.12 you can set a splashscreen. See here the necessary electron.manifest.json: https://github.com/ElectronNET/Electron.NET/blob/master/ElectronNET.WebApp/electron.manifest.json Could I help you?

claunia commented

2026-01-29 16:36:08 +00:00

@pwasiewicz commented on GitHub (May 22, 2019):

@GregorBiswanger thanks, I will definitely check this out!
I am aware that app should written as SPA, but I am creating simple APP for internal use, and bare MVC allows to do me it quickly. I don't mind if window visibility time will be a little longer as soon as flickering effect is gone.
Will let you know as soon as I check it it my app.

Regards!

@pwasiewicz commented on GitHub (May 22, 2019): @GregorBiswanger thanks, I will definitely check this out! I am aware that app should written as SPA, but I am creating simple APP for internal use, and bare MVC allows to do me it quickly. I don't mind if window visibility time will be a little longer as soon as flickering effect is gone. Will let you know as soon as I check it it my app. Regards!

claunia commented

2026-01-29 16:36:08 +00:00

@thamathar commented on GitHub (May 28, 2019):

Hey @pwasiewicz

I found some points for optimization:

Mainly a single-page app architecture is recommended. The classic MVC gives you a flicker effect.

Let your window show only when the content is ready. You can use the following code:
Task.Run(async () =>
{
    var browserWindowOptions = new BrowserWindowOptions
    {
        BackgroundColor = "#a9a9a9",
        Show = false
    };

    var browserWindow = await Electron.WindowManager.CreateWindowAsync(browserWindowOptions);
    browserWindow.OnReadyToShow += () =>
    {
        browserWindow.Show();
        browserWindow.Focus();
    };
});
It then takes a little longer until the window becomes visible. From the new Electron.NET version 5.22.12 you can set a splashscreen. See here the necessary electron.manifest.json: https://github.com/ElectronNET/Electron.NET/blob/master/ElectronNET.WebApp/electron.manifest.json

Could I help you?

Is is possible to add messages on the splashscreen?! To pass the information for what the program is doing to the user?

@thamathar commented on GitHub (May 28, 2019): > Hey @pwasiewicz > > I found some points for optimization: > > 1. Mainly a single-page app architecture is recommended. The classic MVC gives you a flicker effect. > 2. Let your window show only when the content is ready. You can use the following code: > > ``` > Task.Run(async () => > { > var browserWindowOptions = new BrowserWindowOptions > { > BackgroundColor = "#a9a9a9", > Show = false > }; > > var browserWindow = await Electron.WindowManager.CreateWindowAsync(browserWindowOptions); > browserWindow.OnReadyToShow += () => > { > browserWindow.Show(); > browserWindow.Focus(); > }; > }); > ``` > > It then takes a little longer until the window becomes visible. From the new Electron.NET version 5.22.12 you can set a splashscreen. See here the necessary electron.manifest.json: https://github.com/ElectronNET/Electron.NET/blob/master/ElectronNET.WebApp/electron.manifest.json > > Could I help you? Is is possible to add messages on the splashscreen?! To pass the information for what the program is doing to the user?

claunia commented

2026-01-29 16:36:08 +00:00

@GregorBiswanger commented on GitHub (May 28, 2019):

@thamathar No, we have only an image support for splashscreens. The waiting time is only for startup asp.net core..

@GregorBiswanger commented on GitHub (May 28, 2019): @thamathar No, we have only an image support for splashscreens. The waiting time is only for startup asp.net core..

claunia referenced this issue

2026-01-29 16:57:41 +00:00

[PR #303] fix issue #301 #1133

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/Electron.NET#303