Add NProgress component

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Provide a component to display a progress bar with Next.js, Gatsby, etc.

Examples 🌈

import * as React from 'react';
import NProgressBar from '@material-ui/core/NProgressBar';

Router.onRouteChangeStart = () => {
  NProgress.start();
};

Router.onRouteChangeComplete = () => {
  NProgress.done();
};

Router.onRouteChangeError = () => {
  NProgress.done();
};

function AppFrame(props) {
  return (
    <NProgressBar />
  )
}

Motivation 🔦

On Chrome mobile, a progress bar is displayed by default. On Chrome desktop, no progress bars are displayed. However, a number of popular websites are using an approach similar to Next.js and Gatsby. You can find YouTube 32B sessions/month, Facebook 25B sessions/month.

As it turns out, we already have this component available under @material-ui/docs/NProgressBar and use it for our documentation. We could introduce this component in the lab, with a couple of improvements, and kill the docs npm package. The improvements we could bring:

• Remove the dependency on nprogress, the logic is short and simple
• To account for the difference of behavior between mobile (chrome) and desktop: we could only display the progress bar on desktop after an initial 300ms? delay, to avoid unnecessary distractions for pages that load fast. It would also better match the expected experience of end-users on desktop. https://nextjs.org/ has a very similar behavior.

Benchmark

• https://github.com/mui-org/material-ui/blob/next/packages/material-ui-docs/src/NProgressBar/NProgressBar.js
• https://github.com/vercel/next.js/tree/canary/examples/with-loading
• https://github.com/connor-baer/bamboo-ui/blob/e45c96fe3d4dd9276b60d30eea9be935c2b66cd7/src/components/LoadingBar/LoadingBar.js
• https://mantine.dev/others/nprogress/

[italodeandra]

Hi @bryantobing12,

Yes, the NProgress component is not available on MUI. I was the initial responsible for it but its development was frozen.

I’m currently not working with MUI so I can’t really invest time on it. If you’re interested, you can continue it.

[oliviertassinari]

@italodeandra the source of truth of the transition is in https://translate.material-ui.com. Your changes will be lost. I wouldn’t encourage to care, for now.