Next.js Discord

Discord Forum

Correct way to handle searchParam change with Parallel Routes

Unanswered
Arboreal ant posted this in #help-forum
Open in Discord
Arboreal antOP
I have a stats dashboard with different statistics. Each chart is a slot and the user has the possibility to change the date to show stats for different dates. Currently I have a route hook on the Button (client element) element that changes the searchParams. The problem is that after hitting the button the pathname in the browser is unchanged, no loading element of the slots is triggered and it takes some time until the searchParams are updated in the browser bar and thats when the slots get updated. Maybe someone can point me to the error.

10 Replies

@Arboreal ant I have a stats dashboard with different statistics. Each chart is a slot and the user has the possibility to change the date to show stats for different dates. Currently I have a route hook on the Button (client element) element that changes the searchParams. The problem is that after hitting the button the pathname in the browser is unchanged, no loading element of the slots is triggered and it takes some time until the searchParams are updated in the browser bar and thats when the slots get updated. Maybe someone can point me to the error.
Sun bear
How do you change the params?

I do it like this:

'use client';
 
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
 
export default function Search() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();
 
  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams);
    if (term) {
      params.set('query', term);
    } else {
      params.delete('query');
    }
    replace(`${pathname}?${params.toString()}`);
  }
}


Also like you with parallel routes and I see the loading.tsx while fetching new data
@Arboreal ant basically I did the same. Maybe it’s because I use an async layout.. ?
Sun bear
I also do it.

Did you try to artificially let the page load very long like 10s just to see if there is really no loading ui in the page that fetched data based on the search params?

Maybe its just to fast.
Arboreal antOP
yeah, that's what I did, I delayed for 10s just to see. the initial load works like expected. the requests on date change run in parallel but get responses at the same time.
do you wrap the parallel routes in <Suspense>?
@Arboreal ant do you wrap the parallel routes in <Suspense>?
Sun bear
No i didnt. I will check my code tomorrow at work again. In case you did not get an answer until then I will post the relevant parts here.

I will also check if I really get the loading screen but i worked on it today so I should remember it correctly 😅
@Arboreal ant yeah, that's what I did, I delayed for 10s just to see. the initial load works like expected. the requests on date change run in parallel but get responses at the same time.
Sun bear
Hey, I checked my code and I see I was wrong. I also dont get the loading state when changing the url param.

Its only loading on initial load.

Sorry about that. Maybe you have to play around how to add the search params.

router replace, push or as <Link>