Only render NotificationBadge when needed (#9493)

matrix-org · Oct 25, 2022 · 249474b · 249474b
1 parent 6e73a85
commit 249474b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts
@@ -235,7 +235,7 @@ describe("Sliding Sync", () => {
             "Test Room", "Dummy",
         ]);
 
-        cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.be.visible");
+        cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.exist");
     });
 
     it("should update user settings promptly", () => {

diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
@@ -111,7 +111,12 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
     public render(): React.ReactElement {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { notification, showUnsentTooltip, onClick } = this.props;
+        const { notification, showUnsentTooltip, forceCount, onClick } = this.props;
+
+        if (notification.isIdle) return null;
+        if (forceCount) {
+            if (!notification.hasUnreadCount) return null; // Can't render a badge
+        }
 
         let label: string;
         let tooltip: JSX.Element;