🏠 back to Observable

How to implement a data loading activity indicator (spinner)?

Hi all, I’d like to show an activity indicator while the data is loading, then render a chart when data is loaded. What’s the best way of achieving this?

I was thinking about having a global isDataLoaded boolean cell that flips after async data loading is done. I’m doing data = d3.tsv(dataUrl, d3.autoType) and find it weird that it returns the data synchronously instead of returning a promise. I’m also not sure how to change the value of a declared isDataLoaded cell.

For the title question, these notebooks come to mind:

Regarding the questions in your post:

Assuming that you’re describing the behavior that occurs when data is its own cell, note that the Observable runtime implicitly awaits cells that return promises.

Not sure if this is the best way to accomplish what you want, but you could use a mutable cell for isDataLoaded. Then you would assign to it inside another cell using something like this:

// code to load data
// ...
// all done!
mutable isDataLoaded = true;

Note that cells that should be re-evaluated when isDataLoaded changes from false to true (or vice versa) should reference isDataLoaded (and not mutable isDataLoaded).

2 Likes

Thank you! Somehow I searched for all the keywords except “progress”. I think I have all the tools I need now. I’ll play with this.