ExtJs does not display loadMask when using `loader` config

Question

I'm using ExtJs 6.2.1. I have a panel with a loader configuration like the following:

loadHtml: function(url, params){
    var maintab = this.getController('Main').getMainTab(),
        tab = maintab.add({
            title: params.label + (params.objectId ? ' ' + Lang._('n°') + params.objectId : ''),
            bodyPadding: 5,
            loader: {
                url: Paths.ajax + 'sav/' + url,
                params: params,
                autoLoad: true,
                loadMask: true,
                failure: Mb.Msg.loaderFailure
            },
            scrollable: 'y',
            closable: true
        });
    maintab.setActiveTab(tab)
},
// loadHtml is triggered by user interaction
// maintab is a tabpanel containing some tabs

The loadmask does never display. I think this post on the sencha forum is related.

Answer 1

There is a bug in ComponentLoader which does not allow to specify both options autoLoad: true and loadMask: true. addMask called on the panel even if it is not yet rendered.

To solve the bug, let's add the loadMask on the render event. The following override corrects the bug:

Ext.define('Mb.override.ComponentLoader', {
    override: 'Ext.ComponentLoader',
    addMask: function(mask){
        let t = this.target
        if(t.rendered) {
            t.setLoading(mask)
        } else {
            t.on('render', function () {
                t.setLoading(mask)
            })
        }
    },
});

Requirement: This requires that the rendering of the panel is faster than the XHR request fetching the panel content.