I have these code snippets. When I use router.push() inside useEffect, it loads the loading.tsx. But when I use it inside an onSubmit(), it doesn't load the loading.tsx.

Any suggestions? What's the best option? Thanks in advance!

function onSubmit(storeParams) {
    router.push(
      `${pathname}?${createQueryString({
        store_ids: encrypt(storeParams),
      })}`,
      {
        scroll: false,
      },
    );
  }

React.useEffect(() => {
  startTransition(() => {
    router.push(
      `${pathname}?${createQueryString({
          store_ids: storeParams ? encrypt(storeParams) : null,
        })}`,
    );
  });
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [storeParams]);