My problem is that I want to display a loading screen while waiting for the prefetching of some urls (with searchparams) and then fade out that loading screen so that the navigation feels snappy.


I tried just fetch the link directly but it doesn't get the right link because of an RCS payload parameter.

const usePrefetchLinks = (links) => {
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const prefetchAllLinks = async () => {
      try {
        await Promise.all(links.map(async (link) => {
          // Prefetch the link and wait until it's done
          await new Promise((resolve, reject) => {
           // router.prefetch(link).then(resolve).catch(reject); This doesn't work because no Promise object.
            fetch(link).then(resolve).catch(reject); // This doesn't work because of rsc payload not fetched.
            
          });
        }));
      } catch (error) {
        console.error('Error prefetching links:', error);
      } finally {
        setLoading(false);
      }
    };

    prefetchAllLinks();
  }, []);

  return loading;
};

I would appreciate some guidance here. thanks!