Pending updates

After the first load, Solid keeps the current content on screen while the next answer loads. That keeps the page from flashing a fallback on every change, but a screen that doesn't react to a click looks broken. Two helpers fix that.

isPending(fn) is true while a newer answer for that expression is on its way. Use it to dim the old content:

<div class={{ content: true, pending: isPending(content) }}>{content()}</div>

latest(fn) reads the value an update is heading toward. The tab you clicked can highlight immediately, while the content stays in step with what's actually shown:

<button class={{ selected: latest(tab) === name }}>{name}</button>

Use latest on the control the user touched, and plain reads for the content.

Try it: click Posts. Nothing seems to happen for most of a second. Highlight the tab with latest(tab) and dim the content with isPending(content).