I have a Blazor Server application and if, for example, I leave the tab open without using the application or if I update my application, it is disconnected. Blazor manages these states by itself. This is very good, only I find that the user experience is not great. Here is what appears:
Blazor takes care of adding a div with the id components-reconnect-modal and manage its content according to the type of disconnection (server no longer responding, connection rejected, network problem..) :
But if we add it ourselves to our project, then Blazor will use it without adding it!
Why not customize the style
Knowing the id used by Blazor and the content of what it adds we can already customize what it displays. It will already be nicer. For example, we just need to add these CSS styles to the project’s site.css file:
The result is clear, it is much better:
Change reconnection attempts
While we’re at it, we can also modify these reconnection attempts with a little script to be added in the _Layout.cshtml page. The code will speak for itself, just remember to add the attribute autostart=”false” at blazor.server.js :
Another solution with a Razor component
This is what I prefer. In a new Razor component, for example ReconnectDialog.razor, I add this code:
And in the CSS page :
You now add this component to the top of your MainLayout.razor :
And here is what it gives. Of course the div class=”hide” part has to be removed ^^
Yes but…. let’s rethink the user experience!
If it’s disconnected, no more connections, the application is alone in the world. And as our users are not “computer scientists” 😑, we might as well find a trick to make the navitator try to reconnect itself. The good joke would be to add <meta http-equiv=”refresh” content=”30″> 🤪 .
Delete everything we have created (CSS style, div and component) and let the browser manage itself. Simply add this script to the page _Host.cshtml :
This small script that will run in the user’s browser will monitor the presence of the parent/child sequence components-reconnect-modal h5 a in the DOM and if it finds it, restart the connection itself.
⚠ If you want to create your own component, you will have to adapt the querySelector
Related link Microsoft Docs – ASP.NET Core Blazor SignalR guidance
I tried the script in the last portion of your article and it worked well the first time the page timed out and reloaded the page with user intervention. However, on the second time out it was as if the script did not exist. I think you are close to a solution. Thank you.
Thanks so much Christophe! I found this very helpful.
I was able to use both the MutationObserver script to solve what I was looking for. But, now that you have shown it to me I will probably also use the Razor Component idea to be able to customize the modal per client.
Nice solution
Does reload result in loss of state?