Prebuilt 'loading' behavior for button

[Dorian]

Is there any prebuilt ‘loading’ type functionality I can leverage on a button after it is clicked and before the API response is received and the resulting actions occur? I figure I can add a state that is triggered by a variable that is activated on click and reset at the end of the workflow, but I will have to manually build this all the time.

[Alexis]

It could be a very nice feature!

We don’t have that yet, you should be able to do it with two new features coming in the next months, reusable components and animations.

For now, if you managed to create such a feature, you can try to reuse them through design system, you can reuse the same variable to store the state for all your button I guess, or use an object type variable with different keys if needed.

In any case, you will have to put a change variable before and after your workflow.

i’m not sure including a loading variable inside the button and make it more complex is a good idea as it will be very easly done with reusable component and more customisable
It will avoid shipping more complex javascript and behavior to every buttons for everyone even if not needed.

We will continue to think about it because its a very common pattern so it make sense to make it easier for everyone to implement it

[Davy]

Hey @Alexis , any update on this?
Also how do you set it up, I assume when you refer to 2 variables you mean a true/false boolean.
But what do you link them to? The disable input for the button or how do you prevent users from clicking twice on the CTA?

[archenia_jsanchez]

This happens to be something I am familiar with. Since July I believe the reusable components are now live, or at least what I think of as reusable components are. What I have done in a similar situation:

1. add a button to your canvas and turn it into a “new component”
2. create a component level boolean variable to control the loading state, for example “isLoading” and default it to false

3. create a state for the button, for example “loading” (Figure 1 below) and modify its properties accordingly: condition = isLoading (Figure 2), disabled = isLoading (Figure 3), pointer = not allowed (Figure 4)and set your styles as you wish. I also bind logic to the text to switch from the default “button” text to my “loading…” text when isLoading (Figure 5); I imagine there are other paths you can take

Figure1

F2gure 2

Figure 3

Figure 4

/

Figure 5

4. then add a workflow to the button that starts with setting isLoading = true and ends with isLoading = false

Final Outcome:

[Davy]

Thanks ok makes sense.

[Alexis]

Exactly, that’s what I had in mind, and in your workflow on click you can add a path through so you execute only if isLoading not true

Thanks for sharing this nice tutorial!

[Dorian]

@archenia_jsanchez I take the same approach. What I haven’t figured it is how to animate the ellipses (…) at the end of the word loading. Minor detail, but would love it! Anyone know how to do that? @Alexis

Like this in CSS (from The Dots CSS Loaders Collection):

/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side,#000 90%,#0000) 0/calc(100%/3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: l1 1s steps(4) infinite;
}
@keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}