How to get `defer` to work with search params #9567

MoSattler · 2024-06-05T17:01:43Z

MoSattler
Jun 5, 2024

Currently defer does not seem to work with search params. When doing this

import { defer } from '@remix-run/node'
import { Await, Links, Meta, useLoaderData, useSearchParams } from '@remix-run/react'
import { Suspense } from 'react'
import type { LoaderFunction, LoaderFunctionArgs } from '@remix-run/node'

export function getData(page: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Data for page ${page}`)
    }, 5000)
  })
}

export const loader: LoaderFunction = async ({
  request
}: LoaderFunctionArgs) => {
  const url = new URL(request.url)

  const page = parseInt(url.searchParams.get('page') ?? '1')
  const dataPromise = getData(page)

  return defer({
    page,
    dataPromise
  })
}

export default function App() {
  const { page, dataPromise } = useLoaderData<typeof loader>()
  const [, setSearchParams] = useSearchParams();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        Page: {page}
        <br></br>
        <br></br>
        <Suspense fallback={<div>Loading...</div>}>
          <Await resolve={dataPromise}>{(data) => <div>{data}</div>}</Await>
        </Suspense>
        <button
          onClick={() => {
            const params = new URLSearchParams()
            params.set('page', '2')
            setSearchParams(params, {
              preventScrollReset: true
            })
          }}
        >
          Next page
        </button>
      </body>
    </html>
  )
}

defer is working as expecting the first time around. But when clicking Next Page, it does not work anymore, and the loader is blocking the UI. Any way around this?

kiliman · 2024-06-06T00:07:53Z

kiliman
Jun 6, 2024
Maintainer

Try setting <Suspense key={page}>

1 reply

MoSattler Jun 6, 2024
Author

@kiliman Thank you for checking this out!
Unfortunately, this does not work - in fact, the component is not called again with the new page until all promises in the loader are resolved. Defer does not seem to work on search param change.

MoSattler · 2024-06-06T08:18:20Z

MoSattler
Jun 6, 2024
Author

Since I believe this is a bug, I opened an issue with a repro blitzstack #9572

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to get `defer` to work with search params #9567

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to get defer to work with search params #9567

Uh oh!

MoSattler Jun 5, 2024

Replies: 2 comments · 1 reply

Uh oh!

Uh oh!

kiliman Jun 6, 2024 Maintainer

Uh oh!

MoSattler Jun 6, 2024 Author

Uh oh!

MoSattler Jun 6, 2024 Author

How to get `defer` to work with search params #9567

MoSattler
Jun 5, 2024

Replies: 2 comments 1 reply

kiliman
Jun 6, 2024
Maintainer

MoSattler Jun 6, 2024
Author

MoSattler
Jun 6, 2024
Author