Docs

Documentation versions (currently viewingVaadin 24)

Connection Indicator

The connection indicator informs the user of the server connection status, and indicates loading progress if network requests take some time. Its duration and style are configurable.

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).

<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>

Configuring the Component

The connection indicator can be configured from TypeScript in index.ts. 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

300

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:

// ...
import { connectionIndicator } from '@vaadin/hilla-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...';