Waiting when fetch

Community Help
1

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

2

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?

3

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.

4

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"

or

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.

5

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;
  Promise
    .resolve(typeof value === "function" ? value() : value)
    .then((value) => content.replaceWith(value));
  return content;
}
1 Like
6

@PBrockmann Did the above answers solve your problem?

7

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.

See:

Let me know.