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.
7 Replies
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.
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 manuallyThe 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.
Thanks for the pointers, I'll look into those
It would be nice to have a single Suspense handleI 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
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.creates an effect which in turn updates a separate store/context to achieve the desired result based on resource's .loading propertyAre 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 optionGitHub
solid-router/src/data/createAsync.ts at a2652b4eab6576db78e6371e5c0...
A universal router for Solid inspired by Ember and React Router - solidjs/solid-router