Reconnect modal displays immediately in Firefox upon navigation

[Bouke]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

The following issue appears when using Blazor inside an MVC application. It uses the Render Blazor components from JavaScript feature of .NET 6 to render Blazor components in MVC pages.

In #24137 a delay was added before showing the "reconnection modal", especially for the case where users were navigating away from a page. However in my application I still see the "reconnect modal" appear as soon as I navigate away to another page.

The commit #24566 moves the code around to this location:

aspnetcore/src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts

Lines 95 to 101 in 1dcf7ac

	// The visibility property has a transition so it takes effect after a delay.
	// This is to prevent it appearing momentarily when navigating away. For the
	// transition to take effect, we have to apply the visibility asynchronously.
	this.modal.style.visibility = 'hidden';
	setTimeout(() => {
	this.modal.style.visibility = 'visible';
	}, 0);

The problem seems to be that Firefox executes both this.modal.style.visibility="hidden" and this.modal.style.visibility="visible" in the same reflow. As a result, the css transition is not triggered. When I change the setTimeout delay from 0 to 10 ms the transition is triggered and the delay of 500ms (+10) is respected.

Expected Behavior

When navigating to a new page the reconnect modal dialog should not appear.

Possible solution

By having the modal dialog element already in the DOM the setTimeout workaround to trigger the CSS animation is not needed.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

6.0.2

Anything else?

I've worked around this by introducing a custom reconnect modal dialog that appears only after 5 seconds, but this is not an ideal situation.

[mkArtakMSFT]

Thanks for contacting us. This is a dupe of #28592.
Please upvote the linked issue and provide additional comments about your scenario there if you need.