# Connection Status
> Tells the user when the connection to the server is gone. Standalone component.
A page that loses its connection looks completely normal, but is frozen. If the user fills in a form over a dead connection, everything is gone when she presses send.
```ts
// main.ts, runs once when the app starts
import { defineLtConnectionStatus } from "@lo-tek/interfaces/connection-status"
import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/connection-status.css"
defineLtConnectionStatus()
```
## How to use it
**Plain HTML**
```html
```
```html
```
**React**
```ts
// src/lotek.d.ts, gives types in JSX
import "@lo-tek/interfaces/react-jsx"
```
```tsx
import "@lo-tek/interfaces/connection-status.css"
import { lt } from "@lo-tek/interfaces/react"
import {
defineLtConnectionStatus,
reportFailure,
reportSuccess,
} from "@lo-tek/interfaces/connection-status"
import "@lo-tek/interfaces/tokens.css"
defineLtConnectionStatus()
export function Connection() {
return
}
export async function save(body: BodyInit) {
const connection = document.querySelector("lt-connection-status")
if (!connection) throw new Error("element not found")
try {
const response = await fetch("/api/save", { method: "POST", body })
if (!response.ok) throw new Error(response.statusText)
await reportSuccess(connection)
} catch {
await reportFailure(connection)
}
}
```
`reportFailure(element)` and `reportSuccess(element)` wait until registration has run before they call the method. A call that comes before `defineLtConnectionStatus()`, such as the first message from an event stream, is then carried out as soon as the element is ready, instead of failing.
**Datastar**
```html
```
Datastar keeps a long-lived stream open to the server. If it drops, the page looks right but stops updating. The browser only reports when the machine loses the network, not when the server stops answering, so the script at the bottom is what makes the bar appear in that case too.
## Why it creates the content itself
The server by definition cannot tell you that it is unavailable. If it is down, nothing comes from it to render. So the component creates the content itself, and the builder function sets `data-ignore-morph` so that a later patch does not tear the bar away the moment the connection is back. See [Markup and behaviour](/markup-and-behaviour.md).
## `navigator.onLine` is not enough
The browser only knows whether the machine has a network, not whether the server answers. An office network with no route to the internet, a server that is down, or a stream that has dropped all count as “online”.
So the app reports it itself:
```ts
const connection = document.querySelector("lt-connection-status")
if (!connection) throw new Error("element not found")
try {
const response = await fetch("/api/save", { method: "POST", body })
if (!response.ok) throw new Error(response.statusText)
connection.reportSuccess()
} catch {
connection.reportFailure()
}
```
| Method | When you call it |
| - | - |
| `reportFailure()` | A request to the server failed |
| `reportSuccess()` | A request succeeded again |
`reportFailure(element)` and `reportSuccess(element)` from `@lo-tek/interfaces/connection-status` do the same, but first wait until the element is registered.
The component also listens to the browser’s `offline` and `online`, so a network that disappears is caught without you doing anything.
## Attributes and events
| Attribute | Default |
| - | - |
| `offline-text` | ”No connection. What you type is not being saved.” |
| `online-text` | ”Connection restored.” |
| Event | When |
| - | - |
| `connection-lost` | The bar appears. Once per outage, however many `offline` events the browser sends |
| `connection-restored` | The connection is back |
## Classes you can style
| Class | What it is |
| - | - |
| `.lt-connection-status` | The host element. It is `display: contents` and takes up no space |
| `.lt-connection-status__bar` | The bar itself. Has `data-state="offline"` or `data-state="online"` |
| Variable | Fallback |
| - | - |
| `--lt-connection-status-layer` | `1000` |
| `--lt-connection-status-padding` | `var(--lt-spacing-2) var(--lt-spacing-4)` |
```css
.lt-connection-status__bar {
--lt-connection-status-layer: 9999;
}
```
## Accessibility
The bar is `role="status"` with `aria-live="polite"`, not `alert`. The message is important, but should not interrupt in the middle of a word. It stays until the connection is back, so someone who reads slowly has time to read it.
While a modal dialog is open, the bar is inert and sits under the backdrop, like everything else outside the dialog. If the connection drops then, the user learns about it only when the dialog closes.
Colour alone does not carry the message: the text says what is wrong. In Windows high contrast mode, custom colours and backgrounds are removed, so the bar gets a border in `CanvasText`; otherwise it would be invisible.