JavaScript: xstate: DevExpress: show loading panel

Question

I have an ajax call that fetches data and I have an xstate state machine that invokes this ajax call. I would like to show a spinning wheel(DevExpress loading panel) while data is being fetched. How do I show this loading panel?

    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 */

I would like to show a loading panel while getTransactions is being executed. The above code is not working and there's no error.

score 0 · Accepted Answer · answered Oct 25 '22 at 15:56

I used activities to code showing a loading panel. 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); });

}

JavaScript: xstate: DevExpress: show loading panel

1 Answers1