S
SolidJSBersaelor

Suspense doesn't seem to work with ContextProvider

hey, so recently I noticed, If I use createResource(fetch) and then put <Suspense fallback={<Placeholder>}> I will see the placeholder during loading. But if I have createResource(fetch) inside a ContextProvider, i.e.:
const ContextProvider: ParentComponent = (props) => {
const [data] = createResource(isAuthenticated, fetch);

return (
<Context.Provider value={{
data
}}>
{props.children}
</Context.Provider>
}
const ContextProvider: ParentComponent = (props) => {
const [data] = createResource(isAuthenticated, fetch);

return (
<Context.Provider value={{
data
}}>
{props.children}
</Context.Provider>
}
and then have a
const SomeChild = () => {
const { data } = useAppState();

<Suspense fallback={<Placeholder>}>
{data()}
<Suspense>
}
const SomeChild = () => {
const { data } = useAppState();

<Suspense fallback={<Placeholder>}>
{data()}
<Suspense>
}
then I will not see the suspense-placeholder and in fact my UI will not update until the data is loaded. Does suspense & createResource not work around context-provide and use?
B
Bersaelor271d ago
it seems the provider finished already before my screen is available, and the view just took a long time to layout in the CPU. Thats why It seemed like it should have shown the loading-placeholder
R
REEEEE271d ago
In the code above, you aren't reading the resource. You have to do data() I believe the resource looks for the nearest suspense boundary to where it is read
B
Bersaelor271d ago
sorry, yeah that was simplified sample code as I didn't want to distract from the issue with the details.
Want results from more Discord servers?
Add your server
More Posts
Layout for layout groupTo make a layout for a route you need to make a .tsx file with the same name as the parent folder. BHow to deploy an solid js app myselfHi all, good morning. Does anyone have a resource (blog post, tutorial, vídeo, etc) teaching how to SVG A elements not created correctlyWhen using an <a> element with <Show> or <For> inside an inline SVG element, we get the namespace wrHow to add events for scrolling like React? (with solid-qurey)Hi, I've only been dealing with React projects and I'm practicing Solid-js. `createResource` offerWhat's the best way to create multiple layouts that only some routes use?I need to have multiple layouts. I'd like some pages to use different layouts, rather than a single Looking for best way to re-validate route data after some arbitrary amount of time.Hi all, good morning/afternoon/night. So, i have a routed component with nested routes that share a How to stop VS Code from erroring with `Cannot find name 'React'.ts(2304)`?VS Code is complaining with `Cannot find name 'React'.ts(2304)` but I am not using React at all. I hHow should I use createRouteData``` export function routeData({ params, location }: RouteDataArgs) { return createServerData$( How can I access a store from the parent context from inside of a nested context?I am trying to access the WebsocketContext from inside of the DataStreamContext, in order to send ouUsing `createResource` without triggering suspenseI'm trying to use `createResource` without triggering Suspense. I realised that `data.latest` still