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/

Start by reading packages/material-ui-docs/src/NProgressBar/NProgressBar.js and the referenced Next.js loading example, then review how existing lab components are exposed. Done means an @material-ui/core/NProgressBar component supports the route-change usage shown and addresses the proposed dependency and delayed desktop display improvements.