JavaScript: xstate: DevExpress:显示加载面板

Question

我有一个ajax调用来获取数据，我有一个xstate机器来调用这个ajax调用。我想显示一个旋转轮(DevExpress加载面板)，而数据正在获取。如何显示这个加载面板？

    function getTransactions(){
        return new Promise((resolve, reject) => {        
            try {                                    
                resolve(0);
            } catch (error) { reject('[ErrorCode:-96] Unable to retrieve transactions'); }
        
        });
    }

    const loadPanel = $('.loadpanel').dxLoadPanel({
    shadingColor: 'rgba(0,0,0,0.4)',
    position: { of: '#employee' },
    visible: false,
    showIndicator: true,
    showPane: true,
    shading: true,
    hideOnOutsideClick: false
  }).dxLoadPanel('instance');

   /* code */
gettingTransactions: {
   entry: 'showLoadingPanel',
   exit: 'hideLoadingPanel',
  invoke: {
       src: (context, event) => getTransactions(),                                    
       onDone: {
            target: 'success',
            actions: assign({ returnCode: (context, event) => event.data })
        },
        onError: {
              target: 'showingAlert',
              actions: assign({ errorMessage: (context, event) => event.data })
         }                                    
      }                            
     },
    /*code */

我想在执行getTransactions时显示一个加载面板。上面的代码不工作，也没有错误。

Answer 1

我使用活动来编写显示加载面板的代码。https://xstate.js.org/docs/guides/activities.html#interpretation

function createLoadingActivity(context, activity) {
// Start the beeping activity
var loadPanel = $(".loadpanel").dxLoadPanel({
    shadingColor: "rgba(0,0,0,0.4)",
    position: { my: 'center', at: 'center', of: window },
    visible: false,
    showIndicator: true,
    showPane: true,
    shading: true,
    closeOnOutsideClick: false
}).dxLoadPanel("instance");
loadPanel.show();
const interval = setInterval(() => {
    console.log('Waiting...');        
}, 1000);

// Return a function that stops the beeping activity
return (() => { loadPanel.hide(); clearInterval(interval); });

}