ReconnectDialog

Since 0.1.0-alpha.20

What shows when an interactive server page loses its connection, in the theme.

Static server-side rendering: no circuit, no WebAssembly.

What shows when an interactive server page loses its connection, in place of Blazor's own message (a white box drawn where the theme can't reach it). Put one in App.razor's body, outside the routes:

Usage

razor

<body>
    <Routes />
    <ReconnectDialog />
    <script src="_framework/blazor.web.js"></script>
</body>

Its states

Put one ReconnectDialog in App.razor's body, after Routes. These buttons send it the events Blazor sends when the connection drops; each closes after four seconds.

Always Interactive

Preview Code

Preview

Code

States.razor

@* A preview of each state: these buttons send this page's ReconnectDialog (in App.razor) the
   events Blazor sends when the connection drops, and close it again after four seconds. *@
<Row Gap="2" Wrap>
    <button type="button" class="ib-btn ib-btn-neutral ib-btn-outline" onclick="@Preview("{state:'show'}")">Rejoining</button>
    <button type="button" class="ib-btn ib-btn-neutral ib-btn-outline" onclick="@Preview("{state:'retrying',currentAttempt:2,secondsToNextAttempt:5}")">Retrying</button>
    <button type="button" class="ib-btn ib-btn-neutral ib-btn-outline" onclick="@Preview("{state:'failed'}")">Failed</button>
    <button type="button" class="ib-btn ib-btn-neutral ib-btn-outline" onclick="@Preview("{state:'paused'}")">Paused</button>
</Row>

@code {
    private static string Preview(string detail) =>
        "var d=document.getElementById('components-reconnect-modal'),s=function(x){d.dispatchEvent(new CustomEvent('components-reconnect-state-changed',{detail:x}))};" +
        $"s({detail});setTimeout(function(){{s({{state:'hide'}})}},4000)";
}

Interactive: A real disconnect (stop the server) shows it until the circuit comes back.

Blazor finds it by its id, components-reconnect-modal, and reports each state of the reconnection to it; the main script opens it and writes the message: rejoining, retrying with a countdown, failed (Retry, and again whenever the tab comes back into view), paused by the server (Resume), or a session that couldn't resume (Reload). A circuit the server rejected reloads the page. One per page: remove the template's ReconnectModal, which would answer Blazor too (the script warns in the console when it finds two).

The messages and buttons are IzzyText's (ReconnectRejoining and on, Retry, Resume, Reload).

Mode support

What works in each mode, ReconnectDialog
Feature	Static	Interactive
Shows while Blazor rejoins, retries, fails or is paused	No	Yes

Static: static server-side rendering, with no circuit and no WebAssembly. Interactive: Server, WebAssembly or Auto.

Accessibility

A modal dialog named by its title ("Connection lost", Title), which Escape doesn't close: the page behind it can't respond until it reconnects.
Each new state is read once from a status region; the countdown isn't read every second.
Focus moves to the dialog as it opens, and to Retry, Resume or Reload when one shows.

Parameters

ReconnectDialog parameters
Prop	Type	Default
`Title`The dialog's title.	`string?`	`"Connection lost"`

Plus 4 common props.

Full API