[Badge] Improve demos

[ypresto]

Orignal Title: [Badge] Retain text, color and variant while disappearing

Currently, Badge will apply all appearance immediately even while disappearing transition.

It perhaps causes flicker in some cases like:

• Show red badge with counter if the user has an urgent notification.
• Otherwise show blue badge with counter.
• <Badge color={hasUrgent ? 'error' : 'secondary'} badgeContent={count}>
• Then it unwantedly shows disappearing blue 0 badge after the user opens notification.

Simulating such situation with demo:

docs/src/pages/components/badges/BadgeVisibility.js

-        <Badge color="secondary" badgeContent={4} invisible={invisible} className={classes.margin}>
+        <Badge color={invisible ? 'primary' : 'secondary'} badgeContent={invisible ? 0 : 4} className={classes.margin}>

This PR fixes that flicker: text, color and variant will be applied at next appearing.

[mui-pr-bot]

No bundle size changes comparing ee46512...fa9e6b2

Generated by 🚫 dangerJS against fa9e6b2

[ypresto]

Browser test was failed with timeout. Could I retry it?

[oliviertassinari]

I don't understand, what problem do the changes solve?

[ypresto]

Changing the appearance of a badge while disappearing animation (like badgeContent={1} to {0}, or changing color prop) causes a flickering experience. So this PR keeps the appearance while the animation. It is an enhancement, not a bug.

[oliviertassinari]

Should it be handled in userland? What's the use case for changing the appearance during an animation?

[ypresto]

I think most of the users write badgeContent={count} and set count to 0 to hide a badge, and it effectively changes appearance (content text) at the start of the animation.

Color must be less frequently changed, but writing something like <Badge color={hasUrgent ? 'error' : 'secondary'}> and resetting hasUrgent flag at hiding also causes flicker.

(I checked Google Analytics (which uses different colors for same badge, but maybe different from Material), and it does not animate at disappearing.)

[oliviertassinari]

@ypresto Ok thanks for sharing the use case. I don't think that we should care about the color/variant changes. Regarding the 0 -> 1 jump. I have updated the demo to reproduce it and updated the implementation with a simple patch. If this works for you, I think that it would be great to add a test case (with testing-library, not enzyme).

[oliviertassinari]

@ypresto I have sent one commit to focus on the demo only.

Regarding the animation problem. I can't wrap my head around a viable solution. Any idea?

[ypresto]

I was in new year holidays 🙏

leave it to userland until we have enough time to deticate to it.

I agree with you. Might better to have demo, but perhaps someone want to fix it can find this PR. 😺

[oliviertassinari]

@ypresto I hope you had great holidays! :D.
I'm still wondering what would be a great solution for this problem 🤔. It feels like it would need a new abstraction for the transition to correctly solve it. It's also related to the issues with have with react-transition-group (strict mode, bundle size, no hooks).

[ypresto]

react-transition-group (strict mode, bundle size, no hooks).

Oh, it's somewhat legacy and not retrieving sufficient maintenance? reactjs/react-transition-group#429 🤔

But its <SwitchTransition> looks good solution for this! (I have just known it).

[oliviertassinari]

It seems that the documentation has this exact same issue with the notification. Notice the double state change 2 -> 0 -> invisible.

cc @mbrookes

[mbrookes]

Ah, it was hidden when the popper content covered the icon, so hadn't noticed.

What about this diff?:

index cf1fcef48..1ddcfe62b 100644
--- a/packages/material-ui/src/Badge/Badge.js
+++ b/packages/material-ui/src/Badge/Badge.js
@@ -171,6 +171,8 @@ const Badge = React.forwardRef(function Badge(props, ref) {
     ...other
   } = props;
 
+  const [lastContent] = React.useState(badgeContent, []);
+
   let invisible = invisibleProp;
 
   if (
@@ -184,6 +186,7 @@ const Badge = React.forwardRef(function Badge(props, ref) {
 
   if (variant !== 'dot') {
     displayValue = badgeContent > max ? `${max}+` : badgeContent;
+    displayValue = badgeContent === 0 && !showZero ? lastContent : badgeContent;
   }
 
   return (

[oliviertassinari]

@mbrookes Does it work with consecutive updates?

[mbrookes]

It works with the docs +/- demo, but as soon as I posted it, I realised that for the notifications icon, it's still showing showing 0 before transitioning out. 🤷🏽‍♂️