Handling loading state
What is the correct way to implement a component that depends on state loaded asynchronously?
The component function is executed only once, so I guess that I have to create all effects and memos during that single execution.
My problem is that because the used data may still be loading, my code is full of null-checks.
It is a top-level component (like a bookmarkable page of an SPA), so I cannot "hoist up" its state.
Thanks.
2 Replies
What is the correct way to implement a component that depends on state loaded asynchronously?Suspense boundaries
<Suspense>
The async op is wrapped inside createAsync (or createResource if you are not using @solidjs/router).
While those present a reactive accessor of the async value produced by the op for use within a (synchronous) reactive context they also trigger the closest enclosing Suspense boundary while the currently wrapped promise is in the pending state.
In the simplest case whenever an (createAsync or createResource) accessor wrapping a pending promise is accessed under a Suspense boundary, that Suspense will show its fallback instead.
So while these accessors can return undefined in the pending phase, the Suspense boundary ensures that the "result" will never be shown on the UI.
So while those “false-y checks” are a bit of a pain they don't tend to contribute to the visible, rendered result.
You end up writing logic to “react” to the promise entering the settled state at which point you can finally "fill in the blanks" into your render. Typically you will use derived signals or memos for that (createEffect shouldn't be necessary).SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
MDN Web Docs
Promise - JavaScript | MDN
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
Suspense boundaries behave differently during a transition. You can start your own transition but query will automatically start a transition whenever it wraps a pending promise.
During a pending transition Suspense will not show its fallbackif there is already rendered content under it—it simply paint holds the old content until the new content is ready to replace it.
In that case you could use the global pending signal to drive some sort of global loading indicator to communicate the loading state.Chrome for Developers
Paint Holding - reducing the flash of white on same-origin navigati...
A quick overview of paint holding. A Chrome feature for reducing the flash of white on same-origin navigations