Conditionally showing loading/spinner content while libraries are loading

[jimjam-slam]

Description

Demos for this thread are in jimjam-slam/demo-quarto-dynamic-imports!

I often use a conditional pattern to show a message instead of a plot:

test-good.qmd

---
title: "Successful conditional test"
---

Let's filter some data on a dropdown menu:

```{ojs}
//| label: import-and-filter

data = FileAttachment("penguins.csv").csv({ typed: true })

viewof selectedIsland = Inputs.select(
  ["Torgersen", "Biscoe", "Dream", "This place doesn't exist"], {
    value: "Torgersen"
  })

filteredData = data.filter(d => d.island == selectedIsland)

filteredData
```

Now we'll _conditionally_ show the plot: if there's no data displayed, we'll show a message instead:

```{ojs}
//| label: plot

filteredData.length == 0 ?
  md`No data available for the group **${selectedIsland}**`:
  Plot.plot({
    marks: [
      Plot.dot(filteredData, {
        x: "bill_length_mm",
        y: "bill_depth_mm"
      })
    ]
  }) 
```

If you select the fourth island option here, you get a message instead of the plot.

I'm interested in doing something similar to show a spinner or a message when cells haven't yet loaded. The motivating idea is that it's not uncommon to get errors in subsequent cells until library imports revolve. For example, here's a demo where we use two exports from Arquero, aq and op. If you put on network throttling, you'll notice the errors complaining about op until the library import is fully resolved:

test-import-bad.qmd:

---
title: "Error until Arquero loads"
---

In this test, we'll wait on something loading (Arquero) before showing anything. We're not doing anything special here, just using Arquero immediately. We get an error in the later cells until it's loaded, though:

```{ojs}
//| label: import-and-filter

import {aq, op} from "@uwdata/arquero"

data = aq.loadCSV("penguins.csv")
  
dataWithDate = data.derive({ date: d => op.datetime(d.year) })

viewof selectedIsland = Inputs.select(
  ["Torgersen", "Biscoe", "Dream", "This place doesn't exist"], {
    value: "Torgersen"
  })
```

```{ojs}
//| label: filter

filteredData = dataWithDate
  .params({ selectedIsland: selectedIsland })
  .filter(d => d.island == selectedIsland)
  .objects()

filteredData
```

Now we'll _conditionally_ show the plot. If there's no data displayed, we'll show a message instead:

```{ojs}
//| label: plot

filteredData.length == 0 ?
  md`No data available for the group **${selectedIsland}**` :
  Plot.plot({
    marks: [
      Plot.dot(filteredData, {
        x: "bill_length_mm",
        y: "bill_depth_mm"
      })
    ]
    })
```

Here's a demo where we don't use Arquero, but we sleep for 5 seconds before showing anything. We yield undefined, then sleep, then yield the filtered value. Then we test for undefined when conditionally rendering our content:

test-sleep.qmd:

---
title: "Sleep before showing..."
---

In this test, we'll wait a few seconds before showing anything. For the filtered data, we yield a default value, then wait 5 seconds, then go into a loop where we yield the filtered version:

```{ojs}
//| label: import-and-filter

data = FileAttachment("penguins.csv").csv({ typed: true })

viewof selectedIsland = Inputs.select(
  ["Torgersen", "Biscoe", "Dream", "This place doesn't exist"], {
    value: "Torgersen"
  })

filteredData = {
  yield undefined

  await Promises.delay(5000, "")

  while(true) {
    yield data.filter(d => d.island == selectedIsland)
  }
}

filteredData
```

Now we'll _conditionally_ show the plot: if there's no data displayed, we'll show a message instead:

```{ojs}
//| label: plot

filteredData === undefined ?
  md`Wait a few seconds...` :
  filteredData.length == 0 ?
    md`No data available for the group **${selectedIsland}**` :
    Plot.plot({
      marks: [
        Plot.dot(filteredData, {
          x: "bill_length_mm",
          y: "bill_depth_mm"
        })
      ]
    })
```

Can we apply this idea to imports? Here we try to yield the default value and then immediately yield the filtered data using Arquero instead of a regular JS filter.

I was hoping we'd be able to detect the intermediate undefined value here due to Arquero loading (especially when network throttling is turned on), but it seems like nothing appears until it is fully loaded. And we still get the errors around op:

test-load-static.qmd:

---
title: "Load before showing..."
---

In this test, we'll wait on something loading before showing anything. But we want to find a way to show a message conditionally before that! If you turn on throttling in the browser and hard reload, you'll see that nothing is shown in place of the plot before Arquero is loaded, even though we immediately yield `undefined`.

```{ojs}
//| label: import-and-filter

import {aq, op} from "https://esm.run/arquero"

data = aq.loadCSV("penguins.csv")

viewof selectedIsland = Inputs.select(
  ["Torgersen", "Biscoe", "Dream", "This place doesn't exist"], {
    value: "Torgersen"
  })
```

```{ojs}
//| label: filter

filteredData = {
  yield undefined

  yield data
    .params({ selectedIsland: selectedIsland })
    .derive({ date: d => op.datetime(d.year) })
    .filter(d => d.island == selectedIsland)
    .objects()
}

filteredData
```

Now we'll _conditionally_ show the plot. If there's no data displayed, we'll show a message instead:

```{ojs}
//| label: plot

filteredData === undefined ?
  md`Wait a few seconds...` :
  filteredData.length == 0 ?
    md`No data available for the group **${selectedIsland}**` :
    Plot.plot({
      marks: [
        Plot.dot(filteredData, {
          x: "bill_length_mm",
          y: "bill_depth_mm"
        })
      ]
    })
```

Maybe dynamic imports can fix this! Here's a version where we dynamically import Arquero inside the data filtering cell. This seems to work: we get the expected undefined (so we can conditionally show a "loading" message), then the filtered data:

test-load-dynamic-single.qmd

---
title: "Load before showing..."
---

In this test, we'll wait on something loading before showing anything. But we want to find a way to show a message conditionally before that!

If you turn on throttling in the browser and hard reload, you'll see that nothing initially appears in place of the plot, then "Wait until the library loads..." is shown in place of the plot, then the plot itself loads.

```{ojs}
//| label: import-and-filter

data = FileAttachment("penguins.csv").csv({ typed: true })

viewof selectedIsland = Inputs.select(
  ["Torgersen", "Biscoe", "Dream", "This place doesn't exist"], {
    value: "Torgersen"
  })
```

```{ojs}
//| label: filter

filteredData = {
  yield undefined

  await import("https://cdn.jsdelivr.net/npm/arquero@5/dist/arquero.min.js")

  yield aq.from(data)
    .params({ selectedIsland: selectedIsland })
    .filter(d => d.island == selectedIsland)
    .objects()
}

filteredData
```

Now we'll _conditionally_ show the plot. If there's no data displayed, we'll show a message instead:

```{ojs}
//| label: plot

filteredData === undefined ?
  md`Wait until the library loads...` :
  filteredData.length == 0 ?
    md`No data available for the group **${selectedIsland}**` :
    Plot.plot({
      marks: [
        Plot.dot(filteredData, {
          x: "bill_length_mm",
          y: "bill_depth_mm"
        })
      ]
    })
```

But I'm not sure how to make this work with multiple named exports. If we introduce a reference to op (as in test-load-dynamic-multiple), we get our errors back (and in fact they never resolve).

I've also tried rewriting the dynamic import line as const {aq, op} = await import("https://cdn.jsdelivr.net/npm/arquero@5/dist/arquero.min.js"), but no dice.

Does anyone have a better solution for spinners and loading content, especially where multiple exports are concerned?

[jimjam-slam]

I'm also interested in extending this to error handling for things like data loading, although I think I'd just wrap a full JS async fetch block in a cell for that!

[eamcvey]

I'm trying to implement a spinner/"Loading" message for the redrawing of my Observable plot in my Quarto dashboard. It updates when Observable inputs are changed. The updating of the data itself is fast, but the plot rendering can take a few seconds (lots of data, lots of info in the tooltips). In the meantime it's not that there's no plot, there's still the plot corresponding to the previous input selections, which is confusing. Any general solutions to this problem would be great!

[cscheid]

I'm the one who implemented Observable JS support in Quarto. I'd love for Quarto to be able to do something like that in a built-in fashion, but my conclusion after my last attempt was that I don't think the Observable API has the necessary entry points, and that changing the Observable API to support it would be too risky, because it'd make our implementation drift too far from ObservableHQ's.

Unfortunately, I don't think there's a clean automatic way to do it. What you can probably do is set up a mutable OJS entry that you can toggle "updating = true" before starting a long computation, and then set "updating = false" after. But it will need to be set manually (ie you'll have to write code for it in every plot that uses the feature)

[eamcvey]

It's helpful to know this so I stop trying to make it work - sounds like something we need to lobby the Observable folks for? I appreciate your work getting OJS available in Quarto!