How to disable "Attempting to reconnect to the server" message on ASP.NET Core producton server
There is actually an answer for server-side Blazor as well. According to this: ASP.NET Core Blazor hosting models, one can define a div-element with the id components-reconnect-modal in the body of _Host.cshtml to manipulate the overlay that shows up in case of a connection loss.
That would look something like this:
<body>
...
<!-- Blazor overlay -->
<div id="components-reconnect-modal"></div>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
...
</body>
Blazor applies these custom classes depending on the state of the app. According to the documentation these classes are in effect:
components-reconnect-show: A lost connection. The client is attempting to reconnect. Show the modal.Then you can apply your custom styling to the screen overlay with CSS. If you want to remove them all to you can just choose to not display them at all.components-reconnect-hide: An active connection is re-established to the server. Hide the modal.components-reconnect-failed: Reconnection failed, probably due to a network failure. To attempt reconnection, callwindow.Blazor.reconnect().components-reconnect-rejected: Reconnection rejected. The server was reached but refused the connection, and the user's state on the server is lost. To reload the app, calllocation.reload().
To hide the overlay completely, for instance you can add this CSS:
.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
display: none;
}
If you want a custom look for the overlay, you can just fill the div in _Host.cshtml with content to your liking:
<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show">
<p>
// Message when attempting to connect to server
</p>
</div>
<div class="failed">
<p>
// Message when failing to connect
</p>
</div>
<div class="rejected">
<p>
// Message when refused
</p>
</div>
I have no idea if this works client-side however, as I only work with server-side Blazor. I hope this works for you.
So far I have only found a way how to disable Blazor overlays on pages that do not contain any serverside Blazor components. It is quite simple, I have created an empty Interface IPageWithBlazor and made all models of razor pages that contain serverside Blazor implement this empty interface. Now I can use the following condition in _Layout.cshtml:
@if (this.Model is IPageWithBlazor)
{
<script type="text/javascript" src="~/js/blazor.polyfill.min.js"></script>
<script src="~/_framework/blazor.server.js"></script>
}
About translating messages there is another question that covers the topic.