How to avoid blinking when switching between pages using react-router?

💬 Questions and Help

Hi,

Here is the problem: When the page just loads, it causes blinks (or flashes) while navigating the pages. But after visiting the page for the first time it works smoothly. How to make it work smooth always? I tried to add webpackPrefetch: true but this doesn’t help. Here is the repo for reproduce https://github.com/ashgaliyev/react-router-loadable-components-flashing-problem

[theKashey]

Well, the “real” fix would be to use useTransition and Suspense from the experimental branch of React, so you will be able to “block” transition until the new page is ready.

But that’s “experimental” today, and there is not much you can do.

However, you can try preventing navigation event manually and replaying it once page is ready to accept transition. Probably react-router would be not a best choice in this case.

[hjoelh]

The way I solved this is by not using loadable-components but rather React.lazy and dynamic imports

While your routes are React.lazy’d

Link to a page:

    <a
      href='/dashboard'
      onMouseEnter={() => import('pages/dashboard')} // this is like a prefetch
      onClick={(e) => {
        e.preventDefault();
        import("pages/dashboard").then(() => { // waits for import before navigating (no spinners/fallback)
          navigate("/dashboard");
        });
      }}
    />

Hope this helps