SolidJS•2y ago

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?

7 Replies

BrendanOP•2y ago

...i guess we could just not use createResource for this case.

lxsmnsyc•2y ago

or, just wrap Table with another Suspense

BrendanOP•2y ago

I tried that - but I want the table header and loading row to show while loading. And any suspense around the table seems to prevent that. So then I considered adding a Suspense around just the <TableRows> but the resource is read outside that so it would never trigger.

lxsmnsyc•2y ago

well the data is accessed on Table so the Suspense must be directly wrapped on Table. The only thing I can recommend you is to make the fallback of that Suspense to show a Table skeleton that shows the table header and the loading row

BrendanOP•2y ago

Yeah thanks - that went through my head too. I think I'm heading towards replacing createResource for these cases (or just keep not using Suspense 😅 ).

lxsmnsyc•2y ago

it will be harder for you to scale your UI w/o Suspense. I would recommend it 100% than manually checking loading states basically my recommendation is something like this:

<Suspense fallback={<TableSkeleton />}>
  <Table data={resource()} />
</Suspense>

<Suspense fallback={<TableSkeleton />}>
  <Table data={resource()} />
</Suspense>

BrendanOP•2y ago

Thanks - this is one of our large (150+ route) applications that is in production (without suspense). So no issues scaling so far 😁. I was just experimenting with adding it and ..stuff broke. Hence this query. Thanks for giving it your consideration and your suggestions. I'm glad I've not completely forgotten some relevant approach!

Gaming

Programming

Can I create a hole in Suspense