Add a spinner or overlay when mutations are triggered

[kinow]

Describe exactly what you would like to see in an upcoming release

At the moment, when a user clicks on hold, release, or stop Toolbar buttons, there is no visual feedback to the user in the UI. Users are still able to see what is going on by inspecting browser network, or workflow logs.

But we should add a way to tell users to not worry, that the mutation was executed successfully - or not.

Additional context

Related to #87 I think. @oliver-sanders I thought in a few alternatives:

• disable the button, and replace the icon by a spinning circle
• disable the button, and add an overlay on top of the Toolbar (Toolbar gets greyed out, and comes back to normal once the transaction is done)
• disable the button, and add an overlay on the whole page or on the content area (i.e. leave GScan as-is so users can switch? not sure if that'd work - what happens when user navigates back?)

Any other ideas? This could be applied to other parts of the design, such as tooltip buttons like Trigger/Reset/Hold/Remove/etc.

Pull requests welcome!

[oliver-sanders]

I think disable the button, add a pop-up/overlay.

Once Cylc Flow returns subscription IDs for mutations we will be able to track the progress of requests. In the design document under the "Api On The Fly" section there is an overview of how this could look. The idea being that once a mutation is triggered a pop-up/overlay appears with a spinner displaying the status of the mutation. The overlay could have a "minimise" option which allows the overlay to be minimised into the "commands" box (the "reload", "poll" and "kill" commands could take a while to complete).

So if you tried to stop the suite (even if via the button on the toolbar) you should get the overlay. Messages should appear something like this:

• submitted request
• request received
• waiting for active tasks to stop
• shutting down
• done

[kinow]

Oh, I see the "command queued" in the api on the fly example.

So if you tried to stop the suite (even if via the button on the toolbar) you should get the overlay. Messages should appear something like this

On the sketches, there is a message next to the "Control" button (Toolbar). Is that where these messages should go?

[oliver-sanders]

Yeah, that was the idea.

This is all blue-skies and subject to some thought and design.

Idea is to:

• Make it clear to the user that an action has been requested.
• Keep them up-to date of the request's progress.
• Not prevent them from working whilst the request is in-progress if the request takes a while to return.

So a pop-up/overlay is great but we might need to minimise it in a way where the user can return to it later.

(FYI we should do something similar with the CLI too)