# Async code block remains stuck in a loading state

**URL:** <https://talk.observablehq.com/t/async-code-block-remains-stuck-in-a-loading-state/10865>\
**Category:** Feedback\
**Created:** [September 20, 2026, 12:51pm UTC](https://talk.observablehq.com/t/async-code-block-remains-stuck-in-a-loading-state/10865 "2026-09-20T12:51:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![subairui](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/subairui/32/9631_2.png) [@subairui](https://talk.observablehq.com/u/subairui)\
**Post date:** [September 20, 2026, 12:51pm UTC](https://talk.observablehq.com/t/async-code-block-remains-stuck-in-a-loading-state/10865/1 "2026-09-20T12:51:21Z")

</div>

[https://observablehq.com/@pearmini/genuary-2026-11](https://observablehq.com/@pearmini/genuary-2026-11)

In this notebook, the first code block runs successfully in the [old version of Observable](https://old.observablehq.com/@pearmini/genuary-2026-11), but remains stuck in a loading state in the new version until I explicitly click the Run button. I’m wondering what might be causing this. Thanks!

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [September 20, 2026, 2:48pm UTC](https://talk.observablehq.com/t/async-code-block-remains-stuck-in-a-loading-state/10865/2 "2026-09-20T14:48:09Z")

</div>

Hmm. It seems to be stuck inside `await shiki.codeToHtml`.

Shiki recommends you break this into two steps. An async part to create the highlighter, and then a sync part to use the highlighter. You can declare the highlighter in another cell like so:

```auto
highlighter = shiki.createHighlighter({
  langs: ["js"],
  themes: ["one-dark-pro"]
})

```

Then you can change your `pre` function to be synchronous by using `highlighter.codeToHtml` instead of the shorthand `shiki.codeToHtml`:

```auto
function pre(code) {
  const h = highlighter.codeToHtml(code, {
    lang: "js",
    theme: "one-dark-pro"
  });
  return html`<div style="display:flex;justify-content:center;background:#000;font-family:${f.family};font-size:20px;line-height:1em">${h}</div>`;
}

```

Fork: [https://observablehq.com/d/a689c1c18ef23b3b](https://observablehq.com/d/a689c1c18ef23b3b)

---

<div class="post-metadata">

**Author:** ![subairui](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/subairui/32/9631_2.png) [@subairui](https://talk.observablehq.com/u/subairui)\
**Post date:** [September 21, 2026, 12:39pm UTC](https://talk.observablehq.com/t/async-code-block-remains-stuck-in-a-loading-state/10865/3 "2026-09-21T12:39:02Z")

</div>

Thanks Mike! This is really helpful!