# Plot : loading indicator

**URL:** <https://talk.observablehq.com/t/plot-loading-indicator/6733>\
**Category:** Help\
**Created:** [June 22, 2022, 6:11pm UTC](https://talk.observablehq.com/t/plot-loading-indicator/6733 "2022-06-22T18:11:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [June 22, 2022, 6:11pm UTC](https://talk.observablehq.com/t/plot-loading-indicator/6733/1 "2022-06-22T18:11:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 22, 2022, 6:44pm UTC](https://talk.observablehq.com/t/plot-loading-indicator/6733/2 "2022-06-22T18:44:33Z")

</div>

in an observable cell you can do:

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

```

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 22, 2022, 6:47pm UTC](https://talk.observablehq.com/t/plot-loading-indicator/6733/3 "2022-06-22T18:47:06Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 22, 2022, 8:44pm UTC](https://talk.observablehq.com/t/plot-loading-indicator/6733/4 "2022-06-22T20:44:44Z")

</div>

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

> **[Inspector Spinner 🕵️](https://observablehq.com/d/529808f2ee21ecf4)**
>
> Part 1: Observable's Inspector Any cell output gets passed through Observable's Inspector. The Inspector is responsible for displaying simple stuff like \`name = "foo"\` in a cell output, but also more complex representations like expandable arrays and...

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

---

<div class="post-metadata">

**Author:** ![eamcvey](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/eamcvey/32/9270_2.png) [@eamcvey](https://talk.observablehq.com/u/eamcvey)\
**Post date:** [September 26, 2024, 12:15pm UTC](https://talk.observablehq.com/t/plot-loading-indicator/6733/5 "2024-09-26T12:15:21Z")

</div>

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)