Work in Progress: How to show “loading…” while fetching or processing data

<aside> 💡 NOTE: This is currently only possible in the Advanced Builder

</aside>

Let’s use a Loading situation as an example for this common question!

One idea is to use flags ⛳ with JavaScript in order to display or hide our Loading animation

Let’s pretend we already have our Lottie component in the place that we need on our flow.

What do we need to achieve?

• Show the Loading animation while fetching

• Hide the Loading animation when the data is ready

• Display the data that we fetched on our DOM

1. First, generate a Registered Key called “is_loading”, this will serve as our flag ⛳.

2. Add a show/hide condition to your lottie component of “is_loading” is true.

3. Add a show/hide condition to the component you want to show of “is_loading” is false.

4. On a Computed Field or a Data Output, set the variable “is_loading” to true, before fetching from the API

5. When resolving the promise of the fetch, set the “is_loading” variable to false

The result should be something like this!

https://jmp.sh/mfcr7BnD