Find actions/clickables on the UI missing loading indication for any background action being performed

This is mostly going to be either in-row delete actions or toggle checkbox actions but there could be other examples. A good example right now is on the System > Services table, if you click the toggle button to either or disable the service, nothing happens on the UI. If you navigate away from this page and come back, you’ll see on the UI that the toggle is back to its original state. But if you refresh the page, then the toggle has changed. We need to show a loading indicator on the UI for such actions to convey to the user if what they did actually had an impact or not if the request is instantaneous or in most cases not instantaneous and they should wait for the request to be complete before doing whatever they need to do.

Right now, you can go to the services page, toggle the checkbox, and since UI gives no indication that the user needs to wait, you can just jump back to whatever you needed to do assuming the service has been enabled. The request subscription only lasts until the component is alive. Since we navigate away and the component is destroyed, even the request to toggle the status of that service fails or errors out, the user never found out. In the future when they don’t find their expected behavior elsewhere on the UI and come back to this table, they would be confused as to what is going on.

Hence, the loading indicators are important. The important places to look for this behavior is on the tables with single click actions like delete or enable/disable a property but also keep an eye out for other places such as page headers etc.