# Waiting when fetch

**URL:** <https://talk.observablehq.com/t/waiting-when-fetch/9013>\
**Category:** Help\
**Created:** [March 28, 2024, 10:48am UTC](https://talk.observablehq.com/t/waiting-when-fetch/9013 "2024-03-28T10:48:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [March 28, 2024, 10:48am UTC](https://talk.observablehq.com/t/waiting-when-fetch/9013/1 "2024-03-28T10:48:23Z")

</div>

Hi,  
Is there a way to display a waiting message or a kind of waiting wheel when you fetch for data ?  
Let me know.

---

<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:** [March 28, 2024, 12:10pm UTC](https://talk.observablehq.com/t/waiting-when-fetch/9013/2 "2024-03-28T12:10:48Z")

</div>

Depends on where the fetch is happening and what you want to display when the data has been loaded.

Can you give a specific example, e.g. share a notebook?

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [March 28, 2024, 12:42pm UTC](https://talk.observablehq.com/t/waiting-when-fetch/9013/3 "2024-03-28T12:42:31Z")

</div>

Try this one:

> **[International relationships](https://observablehq.com/@pbrockmann/international-relationships)**
>
> What are the international relationships that LSCE researchers have forged through their published articles ?
> Using the API from the HAL Archive, discover from interactive requests and a choice on the different research structures, their...

Choose “LSCE” that will fetch the larger amount of data (very small in fact).

I was just wondering if a spinning wheel or a message from the cell where the fetch command is executed could be displayed.

---

<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:** [March 28, 2024, 1:02pm UTC](https://talk.observablehq.com/t/waiting-when-fetch/9013/4 "2024-03-28T13:02:02Z")

</div>

If the cell had already run before, you can use the cell’s `invalidation` promise to modify the cell output while the cell is invalidated (or replace it with a different element). The modified output will get replaced when the cell updates.

For a basic example, either add

```js
import {suspense} from "@observablehq/fabians-toolbox"

```

or

```js
suspense = (invalidation, element) => {
  invalidation.then(() => element.style.cssText += "opacity:.5;pointer-events:none");
  return element;
}

```

to your notebook, then change your cell’s return value to

```js
return suspense(invalidation, Plot.plot({
  // ...
}));

```

You should now see the cell output getting dimmed whenever you select a different value.

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [March 28, 2024, 3:30pm UTC](https://talk.observablehq.com/t/waiting-when-fetch/9013/5 "2024-03-28T15:30:44Z")

</div>

I use a `defer` function that returns placeholder content while waiting for a promise to resolve. See the notebook for an example.

> **[Placeholder while waiting...](https://observablehq.com/@cobus/placeholder-while-waiting)**
>
> I learned this trick from Mike Bostock and wanted to share it here.

```js
function defer(
  value, // a value, promise, or function that returns the same
  initialContent = html`…` 
) {
  let content = initialContent;
  Promise
    .resolve(typeof value === "function" ? value() : value)
    .then((value) => content.replaceWith(value));
  return content;
}

```

---

<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:** [March 30, 2024, 2:30pm UTC](https://talk.observablehq.com/t/waiting-when-fetch/9013/6 "2024-03-30T14:30:13Z")

</div>

@PBrockmann Did the above answers solve your problem?

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [March 31, 2024, 3:39pm UTC](https://talk.observablehq.com/t/waiting-when-fetch/9013/7 "2024-03-31T15:39:37Z")

</div>

Not really. I have tried to apply `await` ([Awaiting visibility | Observable documentation](https://observablehq.com/documentation/misc/awaiting-visibility) but without success) and had to post another question that is, in my comprehension, relative to this one.

See:

> [@Force graph layout initialisation](https://talk.observablehq.com/t/force-graph-layout-initialisation/9029):
>
> Hi, I am a little bit lost in the way to initialize a graph layout. I have forked the [Sticky Force Layout / D3 | Observable](https://observablehq.com/@d3/sticky-force-layout?collection=@d3/d3-force) and computed my own version. The problem is that the behaviour is not the same at the initialization and when I rerun the cell where the graph layout is produced. The visibility of labels of the connected nodes are not set properly when a click event is used on a node. And the coAuthors variable is empty. Once rerun the cell with the svg.nodes(), the behaviour is corr…

Let me know.