Custom loading screen with text carousel

Hello! I am building a loading screen while an API runs, and since the API takes awhile to execute (~10 seconds), I’m trying to make the loading screen as user friendly as possible. On the screen, I have a loading indicator, but underneath, I would like to have a rotating list of text (similar to the way Lyft has “searching for nearby drivers…”, “driver will be here shortly…”, etc.) that changes every 3 seconds.

My ideal workflow would look like: text 1 fade in → pause 3 seconds → text 1 fade out → text 2 fade in → pause 3 seconds → text 2 fade out → …

I am struggling to implement something like this, because my API and loading workflows cannot run concurrently, so the “every 5 seconds” and “custom event” workflows don’t help here. Does anyone have any good ideas / workarounds for ways to implement this?

Thanks in advance!

What about introducing custom states?!

Load the API result in a custom state.
Define this custom state as a data source of an original text where you wanna display the API response.
Do a conditional on it to hide while custom state is empty.
On the contrary define conditional on the loading text to be visible only when custom states is empty.

As far as the animation goes there used to be a plugin that does just that. Can’t remember the name…

Hope this helps 🫶

@bestbubbledev - Youtube | LinkedIn | Twitter
| Best Nocode Studio

1 Like

Thanks for your response! I am currently using a custom state called isLoading (type yes/no), which I then use conditionals to show/hide the loading page. This is working well, and I’m able to get the loading page to appear and disappear at the right times. The problem I’m trying to solve is with the changing text while the loading screen is up. Sorry for not being clear in my original post.

I tried looking for plugin, but couldn’t find anything that fit what I was looking for. Any suggestions on the timed animated text piece since the workflow will already be in use?

Okay, I found a solution, but it’s not exactly the most efficient, but hey, it’s working!

What I ended up doing is adding a stopwatch plug-in to my loading page that started on page load. Then I created separate text boxes for each text I wanted to display, each nested in its own group (I’ll explain this later). For each text group, I added conditionals, so if the stopwatch’s seconds value was 0-5 make group1 visible, if 5-10 seconds make group2 visible, etc. That got the text changing, but it was a little choppy, so to add the animations, I went to each text group’s layout, checked “collapse when hidden”, checked “animate the collapse operation”, and changed the animation style to “fade in/out”. The text boxes don’t have the option to “animate the collapse operation”, which is why I had to nest each text box in its own group.

Hope this helps somebody, but also, if it turns out somebody has a better / more efficient solution, please let me know. Thanks!! :slight_smile:

This topic was automatically closed after 70 days. New replies are no longer allowed.