feat: hide hover groups on transition (#1427)

Author: setchy

src/components/NotificationRow.tsx

@@ -124,34 +124,36 @@ export const NotificationRow: FC<INotificationRow> = ({
         <NotificationFooter notification={notification} />
       </div>
 
-      <HoverGroup>
-        <InteractionButton
-          title="Mark as Done"
-          icon={CheckIcon}
-          size={Size.MEDIUM}
-          onClick={() => {
-            setAnimateExit(!settings.delayNotificationState);
-            setShowAsRead(settings.delayNotificationState);
-            markNotificationDone(notification);
-          }}
-        />
-        <InteractionButton
-          title="Mark as Read"
-          icon={ReadIcon}
-          size={Size.SMALL}
-          onClick={() => {
-            setAnimateExit(!settings.delayNotificationState);
-            setShowAsRead(settings.delayNotificationState);
-            markNotificationRead(notification);
-          }}
-        />
-        <InteractionButton
-          title="Unsubscribe from Thread"
-          icon={BellSlashIcon}
-          size={Size.SMALL}
-          onClick={unsubscribeFromThread}
-        />
-      </HoverGroup>
+      {!animateExit && (
+        <HoverGroup>
+          <InteractionButton
+            title="Mark as Done"
+            icon={CheckIcon}
+            size={Size.MEDIUM}
+            onClick={() => {
+              setAnimateExit(!settings.delayNotificationState);
+              setShowAsRead(settings.delayNotificationState);
+              markNotificationDone(notification);
+            }}
+          />
+          <InteractionButton
+            title="Mark as Read"
+            icon={ReadIcon}
+            size={Size.SMALL}
+            onClick={() => {
+              setAnimateExit(!settings.delayNotificationState);
+              setShowAsRead(settings.delayNotificationState);
+              markNotificationRead(notification);
+            }}
+          />
+          <InteractionButton
+            title="Unsubscribe from Thread"
+            icon={BellSlashIcon}
+            size={Size.SMALL}
+            onClick={unsubscribeFromThread}
+          />
+        </HoverGroup>
+      )}
     </div>
   );
 };

src/components/RepositoryNotifications.tsx

@@ -78,38 +78,40 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           </span>
         </div>
 
-        <HoverGroup>
-          <InteractionButton
-            title="Mark Repository as Done"
-            icon={CheckIcon}
-            size={Size.MEDIUM}
-            onClick={(event: MouseEvent<HTMLElement>) => {
-              // Don't trigger onClick of parent element.
-              event.stopPropagation();
-              setAnimateExit(!settings.delayNotificationState);
-              setShowAsRead(settings.delayNotificationState);
-              markRepoNotificationsDone(repoNotifications[0]);
-            }}
-          />
-          <InteractionButton
-            title="Mark Repository as Read"
-            icon={ReadIcon}
-            size={Size.SMALL}
-            onClick={(event: MouseEvent<HTMLElement>) => {
-              // Don't trigger onClick of parent element.
-              event.stopPropagation();
-              setAnimateExit(!settings.delayNotificationState);
-              setShowAsRead(settings.delayNotificationState);
-              markRepoNotificationsRead(repoNotifications[0]);
-            }}
-          />
-          <InteractionButton
-            title={toggleRepositoryNotificationsLabel}
-            icon={ChevronIcon}
-            size={Size.SMALL}
-            onClick={toggleRepositoryNotifications}
-          />
-        </HoverGroup>
+        {!animateExit && (
+          <HoverGroup>
+            <InteractionButton
+              title="Mark Repository as Done"
+              icon={CheckIcon}
+              size={Size.MEDIUM}
+              onClick={(event: MouseEvent<HTMLElement>) => {
+                // Don't trigger onClick of parent element.
+                event.stopPropagation();
+                setAnimateExit(!settings.delayNotificationState);
+                setShowAsRead(settings.delayNotificationState);
+                markRepoNotificationsDone(repoNotifications[0]);
+              }}
+            />
+            <InteractionButton
+              title="Mark Repository as Read"
+              icon={ReadIcon}
+              size={Size.SMALL}
+              onClick={(event: MouseEvent<HTMLElement>) => {
+                // Don't trigger onClick of parent element.
+                event.stopPropagation();
+                setAnimateExit(!settings.delayNotificationState);
+                setShowAsRead(settings.delayNotificationState);
+                markRepoNotificationsRead(repoNotifications[0]);
+              }}
+            />
+            <InteractionButton
+              title={toggleRepositoryNotificationsLabel}
+              icon={ChevronIcon}
+              size={Size.SMALL}
+              onClick={toggleRepositoryNotifications}
+            />
+          </HoverGroup>
+        )}
       </div>
 
       {showRepositoryNotifications &&