SolidJS•2y ago

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?

3 Replies

BersaelorOP•2y 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

REEEEE•2y 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

BersaelorOP•2y ago

sorry, yeah that was simplified sample code as I didn't want to distract from the issue with the details.

Gaming

Programming

Suspense doesn't seem to work with ContextProvider