Add fadeIn property to Progress components

React Spinkit has a nice feature:

Fades in spinners after one second

According to research by Jakob Nielsen, feedback after user operations isn’t necessary for about a second so by default, react-spinkit will fade in your spinner at one second. Nevertheless, you can configure spinner fade-in behavior with the fadeIn prop, which accepts values full (the default), half, quarter, and none for one second, a half second, a quarter second, and no fade in, respectively. For example: <Spinner fadeIn='half' />.

What do we think about adding such a fadeIn prop to CircularProgress and LinearProgress? I would say the prop could just be a boolean, or possibly a number if we want the user to be able to configure the duration.

[pelotom]

FWIW, so far I’ve been doing this with overrides, which works great because I can just set it as a general policy and don’t have to worry about remembering to do it every time I use a progress component:

const progressStyle = {
  root: {
    animationName: keyframes({ // `keyframes` comes from the `typestyle` library
      '0%': { opacity: 0 },
      '50%': { opacity: 0 },
      '100%': { opacity: 1 },
    }),
    animationDuration: '1s',
  },
};

export const theme = createMuiTheme({
  overrides: {
    MuiLinearProgress: progressStyle,
    MuiCircularProgress: progressStyle,
  },
});

[mbrookes]

There was a discussion on twitter this week on why you shouldn’t have a delay, but I only skimmed it on mobile, and I can’t find despite trawling the tweet history of likely suspects. Regardless, some devs want to do this, and clearly Jakob Nielsen thinks it’s a good idea, so I’ve added @pelotom’s clever solution to the docs.