Waiting when fetch

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

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?

Try this one:

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.

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

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


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

return suspense(invalidation, Plot.plot({
  // ...

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

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

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

@PBrockmann Did the above answers solve your problem?

Not really. I have tried to apply await (Awaiting visibility | Observable documentation but without success) and had to post another question that is, in my comprehension, relative to this one.


Let me know.