Google App Maker: how to hide spinner programatically?

Question

In google app maker, I'm making an API call to a 3rd party vendor and I'm displaying a spinner while the data loads. How can I hide the spinner programatically once the data loads?

Client Script

google.script.run.withSuccessHandler(function(response){
  
  groupRules= JSON.parse(response);
  
}).withFailureHandler(function(err){
    console.error(err);
    setNotificationText('Unable to retrieve group rules. Please try again.');
    app.popups.snackbar.visible = true;
    
}).getGroupRules(groupId);

Server script

function getGroupRules(groupId) {

  var groupRules;

    var options = {
      'method' : 'GET'
    };

    var groupRulesResponse = UrlFetchApp.fetch('http://apihere.com/' + groupId, options);

  return groupRules;

}

Answer 1

You need to put the Spinner.visible = false; in the success and failure handlers so that App Maker waits for the script to finish.

app.pages.NewPage.descendants.Spinner1.visible = true;

google.script.run.withSuccessHandler(function(response){
  
  groupRules= JSON.parse(response);
  app.pages.NewPage.descendants.Spinner1.visible = false;
  
}).withFailureHandler(function(err){
    console.error(err);
    setNotificationText('Unable to retrieve group rules. Please try again.');
    app.popups.snackbar.visible = true;
    app.pages.NewPage.descendants.Spinner1.visible = false;
    
}).getGroupRules(groupId);