Nextjs 13: How to show the loading ui when search params changes?

Question

I have this component here:

const MyComponent = (props: Props) => {
  const router = useRouter();
  const searchParams = new URLSearchParams(
    Array.from(useSearchParams().entries())
  );

  const form = useForm({
    defaultValues: {
      category: searchParams.get("category") || NaN,
      subcategory: searchParams.get("subcategory") || NaN,
    },
  });

  const subcategory = form.watch("subcategory");

  const updateParams = (
    category: string | number,
    subcategory: string | number
  ) => {
    searchParams.set("category", String(category));
    searchParams.set("subcategory", String(subcategory));

    router.push(`/my-url/?${searchParams.toString()}`);
  };

  useEffect(() => {
    if (subcategory) {
      updateParams(category, subcategory);
    }
  }, [subcategory]);

  const category = form.watch("category"); 

That updates the search params based on user input (from checkout buttons). This triggers page refetch to update the data from UI. But, for some reason, it doesn't trigger the loading.tsx from this route.

I saw people reporting the same error at this github issue. Is there any workaround to make searchparams trigger a loading screen?

I know it would work with path param, but I need a URL with search parameters.