How can I make a button a loading button as long as the function is executed?

Initial situation

I have several functions within an app script
The functions are started via a sidebar - by clicking on different buttons
I have created the sidebar with Bulma CSS

Problem

When starting the function via the sidebar, no message is shown that the function has been started - unlike when starting the function directly or via a custom menu.

This can confuse the user because he clicks and nothing happens at first.

I don't know if this is generally the case with a sidebar, that no indication of the executing function is displayed, or if this has something to do with the event that triggers the function:

<button onclick="google.script.run.myFunction()" class="button is-link"></button>

My idea

Bulma CSS also has a loading button: <button class="button is-loading">Loading</button>

My idea is that when a button is clicked and the function starts, that the button then becomes the loading button. As long as the function is working. When the runtime of the function ends, the loading button should become a normal button again.

What is the best way to implement this?

Solution

In your situation, how about the following sample script using withSuccessHandler?

Google Apps Script side:

function myFunction() {
  Utilities.sleep(1000);
  return "ok";
}

HTML side:

<button onclick="run()" id="button" class="button is-link">button</button>
<script>
function run() {
  const button = document.getElementById("button");
  button.className = "button is-loading"
  google.script.run.withSuccessHandler(e => {
    console.log(e); // Here, you can see the returned value.
    button.className = "button is-link";
  }).myFunction();
}
</script>

In this sample, please load Bulma CSS.
When the button is clicked, the button is changed to the loading situation of button is-loading. When myFunction of Google Apps Script is finished, the button is changed to the initial situation of button is-link.

Reference:

withSuccessHandler(function)