CwOfflineOverlay

Blocking modal shown when the browser loses its connection, with a “back online” notice when it returns. Retry never reloads the page: it calls onRetry (which may return a promise) or re-checks the network, optionally by pinging pingUrl. When a toast context exists, the reconnect notice is shown as a toast.

Simulate

Last event: none yet

CwOfflineOverlay example Copy code 
<CwOfflineOverlay
	forceOffline={simulateOffline}
	onRetry={async () => {
		await checkConnection();
	}}
/>

<!-- Or let the overlay check the network itself: -->
<CwOfflineOverlay pingUrl="/api/health" />
API

Usage and API reference

CwOfflineOverlay can either follow the browser network state automatically or be forced into offline mode for testing. It also shows a short reconnected toast when the connection comes back.

How to think about it

  1. Use real browser state in production Leave `forceOffline` undefined when you want the component to respond to actual `online` and `offline` browser events.
  2. Force the state in demos or tests Pass `true` or `false` to `forceOffline` when you need deterministic UI state.
  3. Decide what Retry should do If you do not pass `onRetry`, the component falls back to reloading the page.

Props and callbacks

APITypeDetails
forceOffline
boolean | undefinedForces the offline state for demos or tests. Leave undefined to use real browser state.
reconnectedDurationMs

Default: 3000

numberHow long the "back online" toast stays visible.
onRetry
() => voidRetry handler. Falls back to `window.location.reload()` when omitted.
showRetryButton

Default: true

booleanShows or hides the retry button.
retryLabel

Default: Try Again

stringText displayed inside the retry button.
pingUrl
stringURL requested by Retry to confirm the connection is back.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Test the overlay with a local toggle

This is the safest way to develop the offline UI.

Test the overlay with a local toggle Copy code 
<script lang="ts">
	let simulateOffline = $state(false);
</script>

<CwSwitch label="Simulate offline" bind:checked={simulateOffline} />

<CwOfflineOverlay
	forceOffline={simulateOffline}
	onRetry={() => (simulateOffline = false)}
/>
Production usage with custom retry behavior

Leave `forceOffline` unset when the browser should drive the state.

Production usage with custom retry behavior Copy code 
<CwOfflineOverlay
	reconnectedDurationMs={5000}
	retryLabel="Reconnect now"
	onRetry={() => refreshDashboardData()}
/>