refactor: deprecate react-transition-group over tailwind animations (#1232)

Author: afonsojramos

package.json

@@ -120,7 +120,6 @@
     "react-dom": "18.3.1",
     "react-final-form": "6.5.9",
     "react-router-dom": "6.23.1",
-    "react-transition-group": "4.4.5",
     "ts-loader": "9.5.1",
     "typescript": "5.4.5"
   },
@@ -133,7 +132,6 @@
     "@types/nprogress": "0.2.3",
     "@types/react": "18.3.3",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-transition-group": "4.4.10",
     "autoprefixer": "10.4.19",
     "css-loader": "7.1.2",
     "electron": "31.0.1",

pnpm-lock.yaml

@@ -8,11 +8,17 @@ import {
   ReadIcon,
   TagIcon,
 } from '@primer/octicons-react';
-import { type FC, type MouseEvent, useCallback, useContext } from 'react';
-
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useContext,
+  useState,
+} from 'react';
 import { AppContext } from '../context/App';
 import { type Account, IconColor } from '../types';
 import type { Notification } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import {
   formatForDisplay,
   formatNotificationUpdatedAt,
@@ -41,8 +47,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
     unsubscribeNotification,
     notifications,
   } = useContext(AppContext);
+  const [animateExit, setAnimateExit] = useState(false);
 
   const handleNotification = useCallback(() => {
+    setAnimateExit(true);
     openNotification(notification);
 
     if (settings.markAsDoneOnOpen) {
@@ -89,10 +97,14 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
   return (
     <div
       id={notification.id}
-      className="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      className={cn(
+        'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
+        animateExit &&
+          'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
+      )}
     >
       <div
-        className={`flex justify-center items-center mr-3 w-5 ${iconColor}`}
+        className={cn('flex justify-center items-center mr-3 w-5', iconColor)}
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
@@ -204,7 +216,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
           type="button"
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Done"
-          onClick={() => markNotificationDone(notification)}
+          onClick={() => {
+            setAnimateExit(true);
+            markNotificationDone(notification);
+          }}
         >
           <CheckIcon size={16} aria-label="Mark as Done" />
         </button>
@@ -222,7 +237,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
           type="button"
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Read"
-          onClick={() => markNotificationRead(notification)}
+          onClick={() => {
+            setAnimateExit(true);
+            markNotificationRead(notification);
+          }}
         >
           <ReadIcon size={14} aria-label="Mark as Read" />
         </button>

src/components/NotificationRow.tsx

@@ -1,6 +1,5 @@
 import { CheckIcon, MarkGithubIcon, ReadIcon } from '@primer/octicons-react';
 import { type FC, useCallback, useContext } from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { AppContext } from '../context/App';
 import type { Account } from '../types';
 import type { Notification } from '../typesGitHub';
@@ -77,17 +76,9 @@ export const RepositoryNotifications: FC<IProps> = ({
         </div>
       </div>
 
-      <TransitionGroup>
-        {repoNotifications.map((obj) => (
-          <CSSTransition key={obj.id} timeout={250} classNames="notification">
-            <NotificationRow
-              key={obj.id}
-              account={account}
-              notification={obj}
-            />
-          </CSSTransition>
-        ))}
-      </TransitionGroup>
+      {repoNotifications.map((obj) => (
+        <NotificationRow key={obj.id} account={account} notification={obj} />
+      ))}
     </>
   );
 };