Next.js Discord

Discord Forum

Is it possible to immediately show suspense fallback when applying filters?

Unanswered
Bighead carp posted this in #help-forum
Open in Discord
Bighead carpOP
There are thousands of paginated items in my table. and thousands of possible filter combinations, I can't actually prefetch them all
I use search params and it changes url only after server request is done, so there is some delay
With slow connection it can take 2+s before user can see any visual response and understand that filters are applied
Is it possible to show loading state immediately and then make all requests etc...

11 Replies

@Bighead carp There are thousands of paginated items in my table. and thousands of possible filter combinations, I can't actually prefetch them all I use search params and it changes url only after server request is done, so there is some delay With slow connection it can take 2+s before user can see any visual response and understand that filters are applied Is it possible to show loading state immediately and then make all requests etc...
Ray
yeah I think you could use <Suspense /> with different key like this
export default async function Page({
  searchParams,
}: {
  searchParams: { page: string };
}) {
  return (
    <Suspense
      key={JSON.stringify(searchParams)}
      fallback={<div>loading...</div>}
    >
      <Table searchParams={searchParams} />
    </Suspense>
  );
}

async function Table({ searchParams }: { searchParams: { page: string } }) {
  await new Promise((resolve) => setTimeout(resolve, 3000));

  return <div>{searchParams.page}</div>;
}
Bighead carpOP
I use it like this actually
I have these timings with enabled throttling, and I can see skeleton only after 2s
@Bighead carp I use it like this actually
Ray
do you use loading.tsx for this route?
@Ray do you use `loading.tsx` for this route?
Bighead carpOP
Nope, but I use another suspense in layout.js for process names fetching
*tsx
Ray
I just tested loading.tsx with searchParams doesn't show immediately
but dynamic params it show immediately
Bighead carpOP
could you send me your example please?
@Bighead carp could you send me your example please?
Ray
app/tables/[...filter]/page.tsx
app/tables/[...filter]/loading.tsx
loading.tsx should be prefetched in production and show immediately on navigation
// app/tables/[...filter]/page.tsx
export default async function Page({
  params,
}: {
  params: { filter: string[] };
}) {
  await new Promise((resolve) => setTimeout(resolve, 3000));

  return <div>{params.filter}</div>;
}

//app/tables/loading.tsx
export default function Loading() {
  return <div>loading...</div>;
}