DevExtreme Angular - Indicate the Loading State
While the content of the DeferRendering widget is getting ready, the widget can display a loading indicator. It is disabled by default, so assign true to the showLoadIndicator if you need to enable it.
<div data-options="dxView: { name: 'Products', title: 'Products' }"> <div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: { showLoadIndicator: true, renderWhen: isReady }"> <!-- Widget content --> </div> </div>
If you want to display custom content instead of the loading indicator, use the following CSS classes.
dx-visible-while-pending-rendering
All elements with this class will be displayed while the main content is getting ready.dx-invisible-while-pending-rendering
All elements with this class are the main content.
<div data-options="dxView: { name: 'Products', title: 'Products' }"> <div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: { showLoadIndicator: true, renderWhen: isReady }"> <div class="dx-visible-while-pending-rendering"> <!-- Displayed while the main content is getting ready --> </div> <div class="dx-invisible-while-pending-rendering"> <!-- The main content --> </div> </div> </div>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.