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?

SolidJS•4y ago•

10 replies

Brendan

Can I create a hole in 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>

      <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>

Can I create a hole in Suspense

Similar Threads

Can I create a hole in Suspense

Similar Threads

Similar Threads

Similar Threads