How it works

Blazor looks for one element with id="components-reconnect-modal" and toggles state classes on it as the circuit drops and recovers. DrylReconnectModal renders exactly that element and hangs all of its visuals — and its enter/exit animation — on those classes with pure CSS. That matters: while the connection is down no C# runs, so the two action buttons use a native onclick (Blazor.reconnect() / location.reload()) that works on a dead circuit.

1
2
3
4
5

@* MainLayout.razor — place it ONCE, near the end of the body. *@
<DrylReconnectModal />

@* That's it. It replaces the default #components-reconnect-modal.
   Remove any hand-written reconnect markup you had before. *@

The three states

The framework drives which state shows. Below, each state is forced on and captured inside a frame (the real component is a full-screen overlay). The spinner and glow are live.

In a real reconnect the reconnecting state also shows a live Attempt X / Y counter and a Next try in Ns line, filled in by the framework (keep ShowAttemptCounter on, which is the default).

Custom messages

Every string is a plain parameter with a sensible default — override any of them, e.g. to localize the overlay:

1
2
3
4
5
6
7

<DrylReconnectModal ReconnectingText="Reconnecting…"
                    FailedText="Connection failed. The server may be unreachable."
                    RejectedText="Deine Sitzung ist abgelaufen."
                    RetryButtonText="Erneut versuchen"
                    ReloadButtonText="Seite neu laden"
                    AttemptLabel="Versuch"
                    NextAttemptLabel="Next attempt in" />