Page Flashing After Initial Load

[RoyIL]

Describe the bug

After the initial page load (i.e. the first time the page is loaded), the Blazor Server website seems to render twice, which creates a weird flickering/flashing effect. Has anyone experience a similar issue before, and is there any way to solve it within the current limitations of Blazor?

Expected Behavior

Page loads without flashing/flickering, even if it is going to take more time to load.

.NET Version

6.0.301

Anything else?

Recording.mp4

[Xyncgas]

Because blazor updates DOM, instead of providing a static page, there is always something to display before the rendering completes which in my opinion you can just have a black screen in the background so everything looks black making users think it is loading instead of flashing

[RoyIL]

Well, the weird thing is that the flashing happens even when the render mode is set to render-mode="Server" in the _Host.cshtml file. Also @Xyncgas, would you know of a good way to implement that?

[javiercn]

@RoyIL thanks for contacting us.

That's expected since the initial render doesn't include content as you are using render-mode="Server". If you prerender, you will only see a flash if you do async work, in which case the content briefly disappears and reappears. You can avoid that by preserving prerendered state on the page and ensuring the second render happens synchronously.

We also have a separate item to avoid doing a second render after prerender all together in most situations, if you are interested, I would suggest you upvote that instead.

#15317

[RoyIL]

Hi @javiercn, thanks for your comment! It's actually seems to work the other way around for me! When the render-mode is set to Server and I persist the application state, the flashing seems to almost disappear.

However, when the render-mode is set to ServerPrerendered and I attempt to persist the application state, the flashing keeps occurring! Prior to opening this issue, I only attempted persisting the state with the ServerPrerendered mode.