Show a Lottie loading animation until Adalo charts finish loading

Get Help
1

Hello everyone,

I’m using Adalo’s Line Chart and Bar Chart components, but they can take up to 10 seconds to load on some devices, which hurts the UX. I’d like to display a Lottie animation while the charts are fetching and rendering data, then hide it as soon as the charts are ready.

So far, I’ve considered two approaches:

1. Simple overlay with fixed timeout

  • Add a Lottie Animation component and group it with the chart, positioning the animation on top.
  • Set the chart to be invisible by default, and the animation visible.
  • On Screen Appears:
    1. Delay for a fixed interval (e.g. 5 seconds).
    2. Show the chart and hide the animation.
  • Drawback: if the charts haven’t finished loading when the timer expires, you’ll still see a blank chart.

2. Hide animation when data is actually loaded

  • Keep the Lottie animation visible until the chart fires a real “data loaded” event (e.g. an onDataLoaded callback).
  • As soon as the chart signals that it’s finished rendering, hide the animation and reveal the chart.
  • Question: Is there a built-in way in Adalo to hook into the chart’s load event? Or would I need to build a small Custom Component (React + Lottie) to expose that callback?

Has anyone implemented approach #2 (or another solution) in Adalo? Any pointers on detecting when charts are fully loaded—without resorting to arbitrary timeouts—would be hugely appreciated. Thanks!

3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.