fix(web): infinite loop browser navigation crash admin settings page

[alextran1502]

No description provided.

[michelheusschen]

The state passed to replaceState doesn't really make sense. I think goto is still the right function to use and we should just be more careful about reactivity.

[alextran1502]

Go to here seems to render again the page and cause this effect function to run again, which lead to an infinity loop. Any other suggestion?

[michelheusschen]

Removing reactivity from searchParams is probably fine:

const searchParams = new URLSearchParams(page.url.searchParams);

$effect(() => {
  if ($state.size > 0) {
    searchParams.set(queryParam, [...$state].join(' '));
  } else {
    searchParams.delete(queryParam);
  }

  handlePromiseError(goto(`?${searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true }));
});

Or an example that includes reactivity for page.url.searchParams:

let search = $derived.by(() => {
  const searchParams = new URLSearchParams(page.url.searchParams);
  if ($state.size > 0) {
    searchParams.set(queryParam, [...$state].join(' '));
  } else {
    searchParams.delete(queryParam);
  }
  return searchParams.toString();
});

$effect(() => {
  handlePromiseError(goto(`?${search}`, { replaceState: true, noScroll: true, keepFocus: true }));
});

[alextran1502]

Nice! That indeed fixes it!