> Markdown version of [Connection Indicator](https://vaadin.com/docs/next/hilla/reference/connection-indicator). Section index: [llms.txt](https://vaadin.com/docs/next/hilla/llms.txt)

# Connection Indicator

The *connection indicator* informs the user of the server connection status, and indicates loading progress if network requests take some time.

It shows connection status messages when the state of the server connection state changes, for example if the user’s device goes offline and then comes back online. Starting an application offline also triggers the connection status message.

Also, to inform the user that loading is in progress and that the *UI* is unresponsive, a *loading bar* is displayed. A longer loading time might be due to, for example, bad network conditions or high server load. Hilla automatically displays a loading indicator after a configurable delay from the start of a server request, and hides it after the processing of the response has ended. Depending on the duration of the ongoing requests, the loading bar progresses through three stages. The duration and style of each stage can be configured.

*With default theme applied*, the connection indicator is shown at the top of the viewport. The connection status message shows after being triggered, for a short, configurable duration. If the connection is available, the indicator containing the message then disappears. Otherwise the indicator remains collapsed, and expandable on hover.

You can change message texts and delays, and customize the appearance of the indicator.

Hilla automatically creates `vaadin-connection-indicator` and adds it to the body. The theming targets the loading bar with the `.v-loading-indicator` selector, and the connection status message with the `.v-status-message`. Both are regular children inside the `vaadin-connection-indicator`. You can also toggle the default theming off to use custom styling of the indicator (see next section).

<!-- vale Hilla.SourceCode = NO -->

Schematic overview of the connection indicator DOM structure

```html
<body>
  <!-- application root level element omitted -->

  <!--
    The indicator element has none or one of the attributes:
    - loading
    - reconnecting
    - offline
  -->
  <vaadin-connection-indicator>
    <!-- "Hilla removes "display: none" when indicator shown -->
    <div class="v-loading-indicator first"
         style="display: none;"></div>

    <div class="v-status-message">
        <span>
          <!-- The current connection status message -->
          Online
        </span>
    </div>
  </vaadin-connection-indicator>
</body>
```

<!-- vale Hilla.SourceCode = YES -->

## <a id="configuring-the-component"></a>Configuring the Component

The connection indicator can be configured from TypeScript in the frontend entry point — `index.tsx` in a React application, or `index.ts` in a Lit application. To do this, import `connectionIndicator` and configure one or more of the following properties:

| Property            | Default Value                            | Description                                                                                |
| ------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------ |
| `applyDefaultTheme` | `true`                                   | Set to `false` if you want to use custom styles for the connection indicator               |
| `firstDelay`        | `450`                                    | Delay (ms) before showing the loading bar and setting the `first` CSS class name           |
| `secondDelay`       | `1500`                                   | Delay (ms) before setting the `second` CSS class name (loading bar becomes more prominent) |
| `thirdDelay`        | `5000`                                   | Delay (ms) before setting the `third` CSS class name (loading bar starts pulsating)        |
| `expandedDuration`  | `2000`                                   | Duration (ms) for which messages are visible                                               |
| `onlineText`        | `Online`                                 | The message shown when the connection goes to connected state                              |
| `offlineText`       | `Connection lost`                        | The message shown when the client loses connection to the server                           |
| `reconnectingText`  | `Connection lost, trying to reconnect…​` | The message shown when the client loses server connection and Hilla is trying to reconnect |

For example:

index.tsx (excerpt):

```typescript
// ...
import { connectionIndicator } from '@vaadin/common-frontend';

// Use custom theming
connectionIndicator.applyDefaultTheme = false;

// Set loading bar stage durations
connectionIndicator.firstDelay = 100;
connectionIndicator.secondDelay = 1000;
connectionIndicator.thirdDelay = 3000;

// Set status message properties
connectionIndicator.expandedDuration = 1000;
connectionIndicator.onlineText = 'Online';
connectionIndicator.offlineText = 'Offline';
connectionIndicator.reconnectingText = 'Reconnecting...';
```