I’ve managed to do this. I’ll try and explain how I did it:
-
I’ve created a component that wraps around the native WeWeb button element, the one that has 2 icons nested inside it.
-
At the button level, I have the left icon turned off always and the right icon turned on. I have a component property to control the button’s icon, which will always appear to the right of the text.
-
I then have a state called “loading” which is controlled by the component variable and/or the manual property called “force loading state” which is useful for testing. If the button is in “loading” state then I hide the text and switch the icon to the loading icon and apply animation to it.
Putting this all together, I have a component level workflow that can be executed from outside. So when you tap a button, I trigger this workflow, which switches the button to the loading state, and then run whatever logic I need to, finally ending the workflow with switching back from the loading state. It’s worked pretty well for the most part. The main challenge is that by hiding text causes issues with width:auto so either I accept the button will resize or I set it to a static/stretch width (which is fine for many instances).
