Delay show of LoadMask component

Question

In my scenario, I want to ExtJs.LoadMask only be shown if the ajax calls takes more than 500 milliseconds. It helps the application to be shown more responsive and fast because of less "Loading..." messages in fast ajax calls. (and less page flashing). In this scenario the LoadMask only be shown if the response takes more than 500 ms.

I think the best solution is to override Ext.LoadMask class. But the following attempt was unsuccessful:

Ext.override(Ext.LoadMask, {
    msg: "Loading...",
    timer: null,
    initComponent: function () {
        this.callParent(arguments);
        this.timer = null;
    },
    listeners:{
        beforeshow: function (animateTarget, callback, scope) {
            loadMask = this;
            this.timer =
                setTimeout(function () {
                    loadMask.callParent(animateTarget, callback, scope);
                }, 2000);
            return x;
        }
    }
});

Answer 1

Finally after hours of investigation, found a solution(work-around). although it is a little nasty but it works!

Ext.override(Ext.LoadMask, {
    msg: "Loading...",
    timer: null,
    initComponent: function () {
        this.callParent(arguments);
        this.timer = null;
        this.isInShowProcess = false;
        this.delay = 600; //in milliseconds
    },

    listeners: {
        beforeshow: function (animateTarget, callback, scope) {
            loadMask = this;
            result = this.isInShowProcess != false;
            if (!this.timer)
                this.timer =
                    setTimeout(function () {
                        loadMask.isInShowProcess = true;
                        clearTimeout(loadMask.timer);
                        loadMask.timer = null;
                        loadMask.show(animateTarget, callback, scope);
                        loadMask.isInShowProcess = false;
                    }, this.delay);
            return result;
        },
        beforehide: function (loadMask, eOpts) {
            return loadMask.hideMask(loadMask, eOpts);
        },
        beforedestroy: function (loadMask, eOpts) {
            return loadMask.hideMask(loadMask, eOpts);
        }
    },
    hideMask: function (loadMask, eOpts) {
        if (loadMask.timer) {//not shown yet
            clearTimeout(loadMask.timer);
            loadMask.timer = null;
        }
        return true;
    }
});