JavaScript: xstate: DevExpress: show loading panel - devexpress

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.

Answer 1

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); });
}