Non-blocking state update

Question

there! I was wondering if Svelte has a way to update state in a non-blocking fashion. Here's artifically slow tabs example. https://svelte.dev/repl/565c333f0ab141c1a97e96f855d2e7d0?version=4.2.12

As you can see, when you switch Tab 2, it prevents tab button from being active until tab content rendering finishes. It makes the UI feel less snappy.

I was seeking something like useTransition in React: https://react.dev/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition

Thanks in advance!

Answer 1

You could wrap the slow part in an #await that defers to the next event loop, which causes the contents to be rendered separately (though still in one chunk).

{#await new Promise(r => setTimeout(r)) then}
  <!-- slow contents here -->
{/await}