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

12 messages · Page 1 of 1 (latest)

wooden frost
#

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

image.png
stark wingBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

cobalt flame
# wooden frost There are thousands of paginated items in my table. and thousands of possible fi...

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>;
}
wooden frost
#

I use it like this actually

image.png
#

I have these timings with enabled throttling, and I can see skeleton only after 2s

image.png
cobalt flame
wooden frost
#

*tsx

cobalt flame
#

I just tested loading.tsx with searchParams doesn't show immediately

#

but dynamic params it show immediately

wooden frost
#

could you send me your example please?

cobalt flame