S
SolidJS•6mo ago
navi.ToTskie

When to use data.loading vs <suspense>

Somehow in createresource i cant use <suspense> unless i put 'data()?. Something'
2 Replies
lxsmnsyc
lxsmnsyc•6mo ago
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.ToTskie
navi.ToTskie•6mo 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
Want results from more Discord servers?
Add your server
More Posts
Development vs Build variables - using ViteI have a SolidJS site working nicely. In the Vite development environment I have a variable called "Is there any way of caching an image loaded from a url?I've got images stored on supabase's storage and the first time a component renders, it creates a siMulti-line element truncationDoes anyone know how to achieve the same effect as this library: https://github.com/patrik-piskay/redoes createResource with multiple signals trigger when onMountif createResource has one signal which is false as dependency, the resource will be trigger as the Is there a better way of doing this sub and unsub? I fell like I am just translating React code xD```js function AuthProvider({ children }: { children: JSXElement }) { const [user, setUser] = crIs solids SEO friendly ?Analyzing the webpage solid generate in production I get problems whit SEO, the same problem that reIs there a better way to make authenticated routes ?Hey! Anybody knows if there's a better way to write specific routes that can be only accessed when aaccessing store multiple time, in batch() causes infinite loop```ts createEffect(() => { batch(async () => { for (const card of collection.cards) { [Solid-Start] [Meta] Encoding IssueHello I have an issue with @solidjs/meta on solid-start. When I precise a title with an accent, thecreateresource signal return undifined```tsx const fetchUser = async (id) => (await fetch(`https://swapi.dev/api/people/${id}/`)).json