UI States¶
Widget Loading State¶
A generic loading indicator (loading spinner) is used to represent the widget's data loading states, such as initial loading, data refresh, or pending actions. To maintain a consistent loading experience across all widgets, use the loading spinner provided by the base library for visualizing any loading state.
Use the following steps to add the loading spinner to the widget,
@ifsworld/cloud-home-widget-base version release-1.9.1 onwards |
---|
-
WidgetHelperService
containssetWidgetLoadingState()
method which can be used to manage the loading state of the widget. -
setWidgetLoadingState()
takes two parameters.
@param state: boolean - Loading state
@param loaderId: string (Optional) - Unique identifier for loading state. Default is 'default'.
- If there is only one loader(asynchronous operation that awaits to be completed) that determines the loading state of the widget, then the optional parameter can be ignored. But if the loading state of the widget is determined by multiple loaders, then the optional parameter can be used to pass an identifier for each loader. The widget framework will internally assess the state of all the loaders and enable or disable the spinner.
(deprecated) For earlier versions of @ifsworld/cloud-home-widget-base
CloudHomeWidgetBaseDirective
contains an array of observables which collectively determine the widget loading state.- This by default includes the observable that emits the translations load state.
- Developers can add new
Observable<boolean>
to the list by using thethis.addLoadingObservable(Observable<boolean>) method provided in the base directive.
- Refer
(this.buttonLoading$) example in fnd-sample-widget-1 in cloud home workspace.
- Widget loading state is stored in the nxrx store.
- Depending on the loading state, the widget container component will show an loading indicator overlay.