Brendan
Brendan
PostsComments
SSolidJS
Created by Brendan on 12/7/2022 in #support
Can I create a hole in Suspense
I might just be having a brain fart here - so please be gentle. I confess to not using Suspense in our apps so far. Typically, we're CSR and have just managed our own loading states. But I'm investigating adding Suspense above our router - which creates some other issues for us.
Consider this structure; 
      <Suspense>
        <Routes>
          {
            // a component somewhere
            () => {
              const resource = createResource(...);
              return (
                <Table data={resource()/* resource is read at this level to support table sorting/filtering, etc */}>
                  <TableHeader />
                  <Show when={!resource.loading} fallback={<LoadingRow />}>
                    <TableRows />
                  </Show>
                </Table>
              );
            }
          }
        </Routes>
      </Suspense>
      <Suspense>
        <Routes>
          {
            // a component somewhere
            () => {
              const resource = createResource(...);
              return (
                <Table data={resource()/* resource is read at this level to support table sorting/filtering, etc */}>
                  <TableHeader />
                  <Show when={!resource.loading} fallback={<LoadingRow />}>
                    <TableRows />
                  </Show>
                </Table>
              );
            }
          }
        </Routes>
      </Suspense>
The desired outcome is: - the table header/footer, etc to render while the resource is loading. - and table body to be showing a loading spinner row while loading. But the resource needs to be read in the table header (to be used for filtering/sorting ui).
So essentially, I think we want this resource to not trigger a parent Suspense so we can do our manual loading state thing in the table body. Am I missing an approach to opt part of the tree out of Suspense?
11 replies