Showing a loader while a Data API call is running

Need help APIs
1

Hi everyone,

My apps front end makes several calls to an external analytics API to show stats on my dashboard. The API calls are set up via the connector with the type of ‘Data’

Question is - how can I conditionally show a loading icon in the front end whilst I wait for those calls to run and respond? I haven’t been able to find a way yet and it would massively improve the page experience!

CleanShot 2023-03-10 at 13.13.43
CleanShot 2023-03-10 at 13.13.43783×271 42.9 KB

Any suggestions really appreciated :slight_smile:

James

1 Like
3

If you already know how to show a loader you are one step in the right direction. If not, first search that or check out my this tutorial

Once you know how to do the loader, you can set things up based on the :count of the repeating group you are displaying the API results in…if the count is 0 assume it is loading

1 Like
4

Hi James, pretty easy.

  1. First, install this plugin: CSS Loading Animations Plugin | Bubble

  2. Add the loading spinner to your page and set it to hidde.

  3. In the API call workflow, go to Element Actions > Show then select the loading spinner element you added to your page.

  4. In the workflow, just before displaying result of the API call, use Element Actions > Hide to hide the element.

5

Thanks for the suggestions!

I’m currently using the API as ‘data’ instead of ‘action’

I’ll try using it as an action and getting the data via backend workflow and use that to show the loader

6

Although I don’t think this fits your specific scenario, for those who use a RepeatedGroup, you can use the is loading state: States - Bubble Docs (it’s a shame they didn’t generalize this for any element that uses an API call or other data source that requires a fetch over the network).

This doesn’t handle the case when a descendant element in your RepeatedGroup makes another API call based on the parent group’s object for that row. :confused: For that situation, I’ve used a separate loader per row, that starts off visible, but is hidden when the Parent group's value is not empty. (This approach could possibly work in your case.) But I don’t see any good way to have a single spinner represent the total loading state of all its children right now.

7

Hi @jamesdevonport ,

Did you manage to have the API call work as action? If yes, it would be much appreciated if you could explain how you have done it.

Thanks!

1 Like
8

Hey yes I did do that in the end and it works pretty well.

I have a custom state on the element called Loading yes/no.

When it’s set to ‘yes’ the animation shows, stops when it’s no.

So then I use a workflow, and at the start set the loading state to yes, get the data in the next step, then in the final step set the loading status back to no.

Here’s how it looks in UI, note the loading animation on the top stats starts and stops when the data is loaded

I
CleanShot 2023-07-12 at 16.59.19

1 Like
9

Yes please! What is the best way to load data in a workflow? Should you call an API on page load and then set a custom state?

10

May I know which plugin is used for this loader?

11

Sorry for the delayed response! This is just with some custom CSS on the element!

Use conditional rule to apply the element name ‘skeleton-loader’ to a group and have this HTML code on the page header

<style>
  #skeleton-box {
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: #DDDBDD;
  }

  #skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0.5) 60%,
      rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
    content: '';
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
</style>

Works really nicely, good luck!