Extjs 7.0 Classic Mymask Message is loading and will disappear but only one user is not closing when screen renders

Question

When a user has click on update or add on the form -> loadFormData: function, I have a message to let them know that the screen is loading. When the form is successful I have the message to disappear. But there is only one user it does not close, the screen displays the loading message. I put a debugger in the function and watch the user start the message and fall into the success function. But fails to close the message. I have tried to reproduce on Chrome, Windows Explore and Edge and cannot reproduce.

loadFormData:function(id, history, callback){
     var historyID = 0;
    if(id==undefined) id = 0;
    if(history) historyID = id;
    this.getForm().reset();
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."});
    this.getForm().load({
        url:'fc.php',
        method:'POST',
        scope:this,
        params:{
            _C_A:this.loadDataController,
            _hid:historyID,
            _uid:id
        },
        success:function(form, action){
          this.formData = action.result.data;
            this.fireEvent('afterFormSaved');
            if(typeof(callback)=='function'){
                callback();
            }
            Ext.getBody().dom.lastChild.remove();
        },
        failure:function(form,action){
            Ext.getBody().dom.lastChild.remove();
            var myMsg = 'Something went wrong while fetching form data. Please contact support';
            if(action.result && action.result.msg) myMsg = action.result.msg;

            Ext.Msg.show({
                title:'Form failed to load',
                msg:myMsg,
                icon:Ext.MessageBox.ERROR
            })
        }
    });
  },`

I have tried to add a timeout but still fails in the success.

Answer 1

Use for Classic

Ext.getApplication().getMainView().mask('Loading...');
Ext.getApplication().getMainView().unmask();

Use for Modern

Ext.Viewport.mask('Loading...');
Ext.Viewport.unmask();

Explanation: All Components support mask

https://docs.sencha.com/extjs/7.7.0/modern/Ext.form.Panel.html?#method-mask

Also read setMasked

Component.setMasked({
    xtype: 'loadmask',
    message: 'My Message'
});

Other usecases are to set loading for a grid (it is a component) via mask

grid.setLoading('Retrieving data ...');
grid.setMasked('Retrieving data...');
grid.mask('Retrieving data...');

Overall code quality: It might be a good idea to get a code-review for your code. Your current code, is hard to read and does not following Sencha best practices. If you are not supporting IE9 you might consider using ECMA 6 basics.