Suspense doesn't seem to work with ContextProvider

hey, so recently I noticed,
If I use

createResource(fetch)

createResource(fetch)

and then put

<Suspense fallback={<Placeholder>}>

<Suspense fallback={<Placeholder>}>

I will see the placeholder during loading.
But if I have

createResource(fetch)

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

suspense & createResource

not work around context-provide and

use

use

SolidJS•3y ago•

4 replies

Bersaelor

Suspense doesn't seem to work with ContextProvider

hey, so recently I noticed,
If I use

createResource(fetch)

createResource(fetch)

and then put

<Suspense fallback={<Placeholder>}>

<Suspense fallback={<Placeholder>}>

I will see the placeholder during loading.
But if I have

createResource(fetch)

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

suspense & createResource

not work around context-provide and

use

use

Suspense doesn't seem to work with ContextProvider

Similar Threads

Suspense doesn't seem to work with ContextProvider

Similar Threads

Similar Threads

Similar Threads