Avoiding concurrent calls to `view.runAsync` using `svelte-vega`
09:39 09 Mar 2026

I'm currently integrating a vega chart into a svelte application using svelte-vega (i.e. the Vega component).

Some of my application state is managed by svelte but drives annotations (i.e. marks without a from property - similar to the text mark in step 7 of the airport tutorial) inside my vega chart. To pass the required data into the chart, I'm using a set of signals. I'm driving these signals using an $effect alongside view.signal and view.runAsync similar to:

let value1 = $state();
let value2 = $state();

$effect(() => {
  view
    .signal("signal1", value1)
    .signal("signal2", value2)
    .runAsync();
}

view.runAsync's docs state:

This method should not be invoked repeatedly until a prior call resolves: callers should await the result of runAsync (or use .then(...) chaining) before re-invoking the method.

I can guard my calls to runAsync to ensure the above and prevent my code from calling runAsync multiple times concurrently. However, the VegaEmbed component (used by the Vega component) also issues calls to runAsync. I.e. to fully address the above remark from the docs, I have to somehow synchronize my calls to runAsync with the internals of VegaEmed. I don't see any obvious way of doing this. What is the recommended approach/best practice to do so?

svelte vega