DevExtreme React - Overview
The DeferRendering is a widget that waits for its content to be ready before rendering it. While the content is getting ready, the DeferRendering displays a loading indicator.
In the following example, the List widget is populated with remote data. While this data is being loaded, the DeferRendering widget displays a loading indicator. Note that the DeferRendering requires its renderWhen option to be set to a Promise (jQuery or native). The content of the DeferRendering will be shown once this Promise is resolved.
<div data-options="dxView: { name: 'Products', title: 'Products' }"> <div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: { showLoadIndicator: true, renderWhen: isReady }"> <div data-bind="dxList: { dataSource: productList }"></div> </div> </div>
MyApp.Products = function(params, viewInfo) { var isReady = $.Deferred(); return { isReady: isReady.promise(), productList: db.Products, viewShown: function() { productList.load().done(function() { isReady.resolve(); }); } }; };
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.