S
SolidJS2mo ago
vorph

Suspense overlay

Hi, I'm currently working on an application where we're performing multiple requests via resources in nested components and using Suspense as a catch all to show a loading indicator would make a lot of sense. The issue is that we do want to show the children of Suspense and the indicator at the same time. I skimmed through the Suspense source and it doesn't seem possible to hook into the existing system since SuspenseContext/getSuspenseContext is not exported to create a separate component. Is it feasible to do this with the current state of Suspense? Something like an overlay prop on Suspense would be ideal eg.
<Suspense fallback={<div>Loading...</div>} overlay={true}>
<AsyncFooBar />
</Suspense>
<Suspense fallback={<div>Loading...</div>} overlay={true}>
<AsyncFooBar />
</Suspense>
7 Replies
peerreynders
peerreynders2mo ago
The issue is that we do want to show the children of Suspense and the indicator at the same time.
I'm probably not understanding the full scope of your solution, so explaining how nested suspense boundaries can't satisfy your requirements may help things along.
vorph
vorph2mo ago
They mostly could, though in some cases we want to swap some content in-place while showing a loading indicator and the previous version of the resource (think swapping image resolutions after depending on the zoom level etc.) - It would be nice to have a single Suspense handle that higher in the component tree and not have to handle each case manually
peerreynders
peerreynders2mo ago
The other thing is the once you are past the first load of the component you can useTransition to do away with the (local) loading indicators to implement paint holding and use a global loading indicator instead.
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
peerreynders
StackBlitz
Using a global loader for transitions - StackBlitz
solid-router's implicit transitions discourage page partial loading fallbacks in favour of paint-holding the stale page while showing one central loading indicator.
vorph
vorph2mo ago
Thanks for the pointers, I'll look into those
peerreynders
peerreynders2mo ago
It would be nice to have a single Suspense handle
I suspect that something like this is special cased enough to not be handled at the core level and right now I don't see anything in the Solid Primitives (I think of them as Solid Mechanisms because primitives belong in the core) offerings that seems to fit. Perhaps somebody else will prove me wrong.
Solid Primitives
A library of high-quality primitives that extend SolidJS reactivity
vorph
vorph2mo ago
FYI, I ended up wrapping createResource with a function that automatically creates an effect which in turn updates a separate store/context to achieve the desired result based on resource's .loading property. A loading indicator is shown based on that store value instead of using Suspense.
peerreynders
peerreynders2mo ago
creates an effect which in turn updates a separate store/context to achieve the desired result based on resource's .loading property
Are you familiar with this idiom as it is applied here? Personally, I go out of my way to not set anything reactive inside an effect. createResource storage option
GitHub
solid-router/src/data/createAsync.ts at a2652b4eab6576db78e6371e5c0...
A universal router for Solid inspired by Ember and React Router - solidjs/solid-router