The Connection Indicator

The connection indicator informs the user about the server connection status, and indicates the loading progress in case 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 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. Vaadin automatically displays a loading indicator after a configurable delay when a server request starts, and hides it after the response processing 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 at the top of the viewport. The connection status message shows after trigger for a short configurable duration. If the connection is available, the indicator containing then message then disappears, otherwise the indicator remains collapsed and expandable on hover.

You can change messages text, delays, or customize the looks of the indicator.

Vaadin 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 for using 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>
    <!-- "Vaadin 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 so, import connectionIndicator and configure one or more of the following properties:

PropertyDefault valueDescription

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 Vaadin is trying to reconnect

For example:

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