@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
36 lines (35 loc) • 1.68 kB
JavaScript
'use client';
import '@ui5/webcomponents/dist/BusyIndicator.js';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
* The `BusyIndicator` signals that some operation is going on and that the
* user must wait. It does not block the current UI screen so other operations could be triggered in parallel.
* It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.
*
* ### Usage
* For the `BusyIndicator` you can define the size, the text and whether it is shown or hidden.
* In order to hide it, use the "active" property.
*
* In order to show busy state over an HTML element, simply nest the HTML element in a `BusyIndicator` instance.
*
* **Note:** Since `BusyIndicator` has `display: inline-block;` by default and no width of its own,
* whenever you need to wrap a block-level element, you should set `display: block` to the busy indicator as well.
*
* #### When to use:
*
* - The user needs to be able to cancel the operation.
* - Only part of the application or a particular component is affected.
*
* #### When not to use:
*
* - The operation takes less than one second.
* - You need to block the screen and prevent the user from starting another activity.
* - Do not show multiple busy indicators at once.
*
*
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
*/
const BusyIndicator = withWebComponent('ui5-busy-indicator', ['delay', 'size', 'text', 'textPlacement'], ['active'], [], []);
BusyIndicator.displayName = 'BusyIndicator';
export { BusyIndicator };