Blazor server renders twice resulting in static HTML animation showing twice

[aryehsilver]

All over the web there have been discussions about how Blazor server hits the OnInitialized method twice, once in prerendering and again after the connection has been established in the browser.
All the above address data and how to preserve the state after prerendering.

I am using .Net 6 and have a pure static HTML razor component that has an animation done in CSS. The animation occurs twice.
In development this occurs so fast that it is almost not conceivable to the user. The same when live but using a strong internet connection. When accessing it via a slow internet connection the animation occurs twice.

I have created a reproducible solution which shows the effect https://github.com/aryehsilver/BlazorDoubleRenderTest.

I also have published live where you can see it in action (using a slow connection) https://projects.aryehsilver.co.uk/double-render.

Here is a clip of the animation in action.

Blazor.Double.Render.mp4

[javiercn]

@aryehsilver thanks for contacting us.

I believe this is the result of the fact that when we render in interactive mode we don't reuse the existing DOM nodes and instead we replace the old DOM nodes with new DOM nodes. I believe a similar thing happens with images and other elements.

It's not really an artifact of the "double" render (static prerender followed by an interactive prerender) but an artifact of how we reconcile the existing prerendered nodes with the new rendered nodes.

[aryehsilver]

@javiercn thanks for clarifying that.

It does seem to be more of an issue on slower connections where there is noticeable time for the reconciliation of the nodes.
Are there any future plans to get around this issue?
Currently how can we create a better user experience?

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[3hxx]

I'm also experiencing the same problem with the entrance animations for html elements. How can we provide make this better for our users? We only want the animation to play once rather than playing once then half way through resetting and playing again

[danroth27]

We are tracking addressing this issue as part of #42561