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).
<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 |
|---|---|---|
|
| Set to |
|
| Delay (ms) before showing the loading bar and setting the |
|
| Delay (ms) before setting the |
|
| Delay (ms) before setting the |
|
| Duration (ms) for which messages are visible |
|
| The message shown when the connection goes to connected state |
|
| The message shown when the client loses connection to the server |
|
| 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...';