Add nprogress in Remix app

Remix is one of latest web framework which helps build great web experiences embracing the fundamentals.

Remix uses Reactjs to hydrate pages on client side and all sites rendered sites have issue showing the loading progress when navigating between pages. This can be fixed by adding nprogress to app

1. Install nprogress #

npm i nprogress if using typescript also do npm i -D @types/nprogress

2. Add import statements #

import Nprogress from 'nprogress';
import nprogressStyles from 'nprogress/nprogress.css';

3. Apply added stylesheets #

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: nprogressStyles }
];

4. In root.jsx or root.tsx use useTransition hook which tells the state of page #

export default function App() {
  ...
const transition = useTransition();

  useEffect(() => {
    if (transition.state === 'loading' || transition.state === 'submitting') {
      Nprogress.start();
    } else {
      Nprogress.done();
    }
  }, [transition.state]);

  ...
}

Now progress har should show up when navigating between pages

posts remix_run reactjs remixjs nprogress

Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated ! For feedback, please ping me on Twitter.

Published