Plot : loading indicator

I’m looking to display “loading” indicator while plot is plotting behind the scene :slight_smile:.
How do, I show a “loading spinner”?

in an observable cell you can do:

{
  yield html`loading…`;
  yield Plot.plot({ marks: [] });
}
1 Like

If the slow part is not so much the plotting but actually loading a large dataset, you could do something like this:

{
  yield html`loading…`;
  const data = await fetch("https://slow data API url");
  yield Plot.plot({ marks: [] });
}

And if you want to get extra fancy you can find a guide here:

Note that part 3 is a bit short on explanations, but has all the code there.

This works for me the first time a plot is created, but if it’s then recreated in response to an input change, I don’t see the loading message. Do you know of a way to make this happen? (I’m using observable within Quarto not in an Observable notebook but I don’t think that matters in this case)