How to detect when chart is loading?

Is there a way to detect when a chart is loading ? I do have a very simple chart above the fold that takes several seconds to show up. I would like to show a loading icon until the chart is visibile. I remember doing this with RG, but apparently this is not the case with charts. Anybody knows how to do it or a work around ? Thanks

1 Like

Hi there, @stefanof… you can use a workflow step to show the icon, and that step would have an Only when condition that uses either one of these options…

page

Hope this helps.

Best…
Mike

Thank you @mikeloc for your suggestion. But I already have a spinner on page loading (above the fold). That fact is that the chart is slower the page load and I would like to detect only its visibility. Here is what happens when I reload the page …

ezgif.com-optimize

Ah, okay… my apologies, @stefanof … I misunderstood your post and didn’t know you already have the icon in place.

I can’t imagine this would do it, but what happens if instead of using the above the fold option for the spinner, you change it to the Page loaded (entire) option? I’m guessing you probably tried that already and it does the same thing… but might be worth trying if you haven’t.

Best…
Mike

Read through this thread for possible solutions:

Very interesting thread @meyerhd2 ! Thank a lot. But it’s too technical for me. I am just a no-coder and I always expect that Bubble solves this kind of issues (maybe @emmanuel will add this feature in the road map). As far as I am concerned there is no viable solution. What I will do is to add a “add a pause before next action” of 5000 ms in the wf “Page is loaded before the fold” right before the “hide pop up spinner” action. I know it is not a solution, but at least it reduces the perception that the page has a blank space right in the center until the chart shows up.

This is one of those challenges that all web-based apps would have to some degree, not just bubble: determining when the browser has finished rendered the page. Each browser will perform differently, think chrome on an old android phone vs chrome on a powerful desktop. It is device-dependent.

Your proposed solution is also discussed in that thread. It will probably “catch” 98% of the use cases, and that is your decision whether the cost (the definite 5 sec wait time) is ok. There is no perfect answer.

In cases like yours–not wanting to get bogged down with programming solutions–I’m sure you can instead come up with a “design solution” that conveys to the user that a chart is still loading and will be here shortly, like a picture placeholder when a picture has not yet rendered. Users are accustomed to seeing that. And just scrap the mandatory 5 sec wait and let the chart show up when its ready. Even Google does that with Gmail, sometimes some elements take longer to load but users recognize that visually.

Most of the time it is the searching/grouping of data that takes the most time when plotting a graph. You can give your spinner the following condition to make it visible (you should use the condition tab):

When ‘page loaded (entire) is yes’ and ‘do a search for count > 0’.

The ‘do a search’ condition is here the exact same as with your graph. If you use a grouping the condition will look like this:

When ‘page loaded (entire) is yes’ and ‘do a search for:grouped by count > 0’.

Just make sure that the do a search function is the same as with your graph. Now when the spinner gets hidden the chart will have its data loaded and will be visible.

For example:

Data source for chart:

Condition for the spinner:

1 Like

Thanks again for your tips, but the issue is not about detecting when chart or data are loaded. It is only about the timing of chart visibility on screen. I have already tried what @Thimo suggested but no result. Then I made a simple and stupid test. Since I do not know how to detect the chart visibility, I just put an empty group with a red background behind the chart. My guess was that when page is loading, if the chart is not there yet then the red group should be visibile.

This is what I have done in the editor

red block

And this is what happen in the frontend when reloading the page (I removed the 5 seconds wait)

reload page

The red group is never visibile. Meaning that the chart is already there :sob: :sob: :sob:

I don’t know what to say … I will probably move on and just forget about it !

Yes the chart element loads instantly, but it is the searching for data that takes time.

I have created a test app where you can see that how my way could work. (Notice the condition on the chart and spinner element) I also struggled some time ago with this problem, but there is definitely a solution! :slightly_smiling_face:

Demo: https://chartloadingtest.bubbleapps.io/
App editor: https://bubble.io/page?name=index&id=chartloadingtest&tab=tabs-1&subtab=App%20Data

3 Likes

Hi @Thimo, create a test app was really nice :smile: Thank you !

Looking at your example I started thinking at the data structure into the query. First of all I was not grouping thinking that the query was easiest (erroneously) and then my “sort by date” was a little overcomplicated (looking to a month table instead to dates directly). I have made a few change to the database and basically copied your search. Got rid of the spinner on page load and put an icon while waiting for the chart. But now it is much faster and you barely notice the red icon.

Thank you so much !!!

chart solved

2 Likes

That looks great…as good or better than a ‘coded’ page!

Thanks for posting the final result, by the way. It really helps when people visit the thread looking for help with similar issues.

1 Like

This might not be EXACTLY relevant. But I was using a hidden repeating group that was pulling and grouping the data I needed for a chart.

When I showed the group that had the chart (that was hidden on initial page load), I also changed a few variables which pulled the exact data I needed, but none of these tricks were working in hiding the loading graphic.

What I realized was that the initial data was loading in the hidden RG while it was hidden, and so the loading screen didn’t catch because it thought it WAS loaded. In order to get around this, I added a condition on the RG that set the data source to be empty when the group was hidden and then changed the data source back when it was shown. Then, these tricks worked. Specifically, I use the if grouped RG’s list of items:count>0, remove loading.

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