Blazor server renders twice resulting in static HTML animation showing twice

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.

https://user-images.githubusercontent.com/55258552/153734618-23707cb4-3340-4c4b-8cf3-efa249af0b0e.mp4

[Freshmintyy]

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 https://github.com/dotnet/aspnetcore/issues/42561