Mashup loading spinner on hypercube

[paulcalvet]

Hello,

I have a dashbaord with a page that contains 6 hypercubes of 8 KPI's.

When the user made a selection, he doesn't see if qlik engine work or not.

I want to add a blur effect on the page as long as the engine is performing calculations.

Here is an example of my code :

cda.controller( "dashboard", ['$scope', function ( $scope ) {
   if ( !app ) {
      app = getQlikApp();
   }

   function GetBudget(reply, app){
   var output = reply.qHyperCube.qDataPages[0].qMatrix[0][0].qText;
   $("#GetBudget").text(output);

   var output1 = reply.qHyperCube.qDataPages[0].qMatrix[0][1].qText;
   $("#GetBudgetEvol").text(output1);

   var output2 = reply.qHyperCube.qDataPages[0].qMatrix[0][2].qText;
   $("#GetBudgetVSObj").text(output2);

   var output3 = reply.qHyperCube.qDataPages[0].qMatrix[0][3].qText;
   $("#GetBudgetOnline").text(output3);

   var output4 = reply.qHyperCube.qDataPages[0].qMatrix[0][4].qText;
   $("#GetBudgetOnlineEvol").text(output4);

   var output5 = reply.qHyperCube.qDataPages[0].qMatrix[0][5].qText;
   $("#GetBudgetOnlineVSObj").text(output5);

   var output6 = reply.qHyperCube.qDataPages[0].qMatrix[0][6].qText;
   $("#GetBudgetOffline").text(output6);

   var output7 = reply.qHyperCube.qDataPages[0].qMatrix[0][7].qText;
   $("#GetBudgetOfflineEvol").text(output7);

   var output8 = reply.qHyperCube.qDataPages[0].qMatrix[0][8].qText;
   $("#GetBudgetOfflineVSObj").text(output8);
   }

   // CreateXKPI return an hypercube

   CreateXKPI(app,"GetBudget",GetBudget,
   "$(vCosts_Y(Channel={'SEA'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",
   "$(vCosts_GROW_Y(Channel={'SEA'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",
   "$(vCosts_VSOBJ_RATE_Y(Channel={'SEA'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",

   "$(vCosts_Y(Channel={'Display'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",
   "$(vCosts_GROW_Y(Channel={'Display'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",
   "$(vCosts_VSOBJ_RATE_Y(Channel={'Display'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",

   "$(vCosts_Y(Channel={'Paid Social'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",
   "$(vCosts_GROW_Y(Channel={'Paid Social'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",
   "$(vCosts_VSOBJ_RATE_Y(Channel={'Paid Social'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",

   "$(vCosts_Y(Channel={'Retail Media'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",
   "$(vCosts_GROW_Y(Channel={'Retail Media'},[Phase]={\"*\"},[Online/Offline]={'Online'}))",
   "$(vCosts_VSOBJ_RATE_Y(Channel={'Retail Media'},[Phase]={\"*\"},[Online/Offline]={'Online'}))"
);

   ... others hypercubes...

   qlik.resize();

}] );

I don't know how to add the event in order to manage my blur effect.

https://help.qlik.com/en-US/sense-developer/June2019/Subsystems/Extensions/Content/Sense_Extensions/...

Can you help me ?

Thanks,

Paul