Apps script: Show loader on button click

Question

I am trying to show a loader in the google sheets sidebar on the button click either on the complete page or at least on the button so that users submitting the form should not press again until the earlier form is submitted. I have added loader through js/jquery. Although they work fine but they are too quick to be even shown to users. I can add some delays but again I don't know how much time will the script take to complete. Therefore it may be good to run it from the apps script/server-side.

Html page:

<form >
    <div class="inputbox">
        <label for="name"><strong>Client Business Name</strong></label>
        <input type="text" placeholder="Client Business Name" name="name" required>
    </div>
    <div class="inputbox">
        <label for="description"><strong>Client Description</strong></label>
        <input type="text" placeholder="Client Description" name="description" required>
    </div>
    <div class="inputbox">
        <label for="domain"><strong>Domain</strong></label>
        <input type="url" placeholder="www.example.com" name="domain">
    </div>
    <div class="inputbox">
        <label for="homepage"><strong>Home Page</strong></label>
        <input type="url" placeholder="www.example.com/home" name="homepage" >
    </div>
    <div class="inputbox">
        <label for="kpi"><strong>Link Goal Per month</strong></label>
        <input type="url" placeholder="www.example.com/home/blog" name="kpi" >
        
    </div>
    <button id="btn" onclick="addvalues" >Add</button>
  </form>

JS:

<script>
    function addvalues() {
        document.getElementById("btn").innerHTML = "Adding.."
        document.getElementById("btn").setAttribute('disabled', 'disabled')
        google.script.run.clientAdd()

    }
</script>

Apps Script:

function clientAdd(form) {
  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getSheetByName('Clients');
  sheet.getRange(sheet.getLastRow() + 1, 2).setValue(form.name);
  sheet.getRange(sheet.getLastRow(), 3).setValue(form.domain);
  sheet.getRange(sheet.getLastRow(), 4).setValue(form.homepage);
  sheet.getRange(sheet.getLastRow(), 5).setValue(form.description);
  sheet.getRange(sheet.getLastRow(), 6).setValue(form.kpi);
}

Answer 1

Modification points:

• addvalues of <button id="btn" onclick="addvalues" >Add</button> should be addvalues();
• In your situation I thought that withSuccessHandler might be suitable.

When these points are reflected to your script, it becomes as follows.

Modified script:

HTML

From:

<button id="btn" onclick="addvalues" >Add</button>

To:

<button id="btn" onclick="addvalues();return false;" >Add</button>

Javascript

From:

function addvalues() {
    document.getElementById("btn").innerHTML = "Adding.."
    document.getElementById("btn").setAttribute('disabled', 'disabled')
    google.script.run.clientAdd()

}

To:

function addvalues() {
  const button = document.getElementById("btn");
  button.innerHTML = "Adding..";
  button.setAttribute('disabled', 'disabled');
  google.script.run.withSuccessHandler(_ => {

    // Please set the loading animation here.

    // In this sample modification, when the button is clicked, the button is disabled, when Google Apps Script is finished, the button is enabled.
    button.removeAttribute('disabled');
    button.innerHTML = "Add";
  }).clientAdd();
}

• When the above modifications are reflected in your script, as a simple sample, when the button is clicked, the text of the button is changed from Add to Adding.. and the button is disabled, when Google Apps Script is finished, the button is enabled and the text of the button is changed from Adding.. to Add.
• Please modify the script in withSuccessHandler to your loader.

Note:

• I'm not sure about your whole script. So I proposed a simple modification from your showing script.

Reference:

• withSuccessHandler(function)