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ā¦
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 ā¦
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
And this is what happen in the frontend when reloading the page (I removed the 5 seconds wait)
The red group is never visibile. Meaning that the chart is already there 
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! 
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 
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 !!!
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.