DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.


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.

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 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
MyApp.Products = function(params, viewInfo) {
    var isReady = $.Deferred();
    return {
        isReady: isReady.promise(),
        productList: db.Products,
        viewShown: function() {
            productList.load().done(function() {
See Also