SolidJS•13mo ago

When to use data.loading vs <suspense>

Somehow in createresource i cant use <suspense> unless i put 'data()?. Something'

2 Replies

To trigger Suspense, you need to call the data function provided by the resource

const [data] = createResource(fetchData);

return (
  <Suspense fallback={<h1>Loading...</h1>}>
    <Show when={data()} keyed>
      {(current) => <MyComponent data={current} />}
    </Show>
  </Suspense>
);

const [data] = createResource(fetchData);

return (
  <Suspense fallback={<h1>Loading...</h1>}>
    <Show when={data()} keyed>
      {(current) => <MyComponent data={current} />}
    </Show>
  </Suspense>
);

Take note that you can omit the Show here however you still need to check in the component you're passing the data to if the data is ready or not (data() !== undefined)

navi.ToTskieOP•13mo ago

tsx 
{data.loading? <h1>...loading</h1>:<MyComponent data={current} />}

tsx 
{data.loading? <h1>...loading</h1>:<MyComponent data={current} />}

looks cleaner. ahh okay, thanks. i think i understand

Gaming

Programming

When to use data.loading vs <suspense>

Did you find this page helpful?