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.

NOTE
The DeferRendering widget is designed for applications built using the DevExtreme SPA Framework. Bear in mind that code examples in this section are supposed to be used in the SPA Framework environment.

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 jQuery.Promise. The content of the DeferRendering will be shown once the Deferred of this Promise is resolved.

HTML
<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>
JavaScript
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