feat: add animation for add favorites (#4317)

packages/component/package.json

@@ -43,6 +43,7 @@
     "dayjs": "^1.11.9",
     "jotai": "^2.4.1",
     "lit": "^2.8.0",
+    "lottie-react": "^2.4.0",
     "lottie-web": "^5.12.2",
     "react": "18.2.0",
     "react-datepicker": "^4.16.0",

packages/component/src/components/page-list/components/favorite-tag.tsx

@@ -5,7 +5,10 @@ import {
   type IconButtonProps,
 } from '@toeverything/components/button';
 import { Tooltip } from '@toeverything/components/tooltip';
-import { forwardRef } from 'react';
+import Lottie from 'lottie-react';
+import { forwardRef, useCallback, useState } from 'react';
+
+import favoritedAnimation from './favorited-animation/data.json';
 
 export const FavoriteTag = forwardRef<
   HTMLButtonElement,
@@ -13,20 +16,30 @@ export const FavoriteTag = forwardRef<
     active: boolean;
   } & Omit<IconButtonProps, 'children'>
 >(({ active, onClick, ...props }, ref) => {
+  const [playAnimation, setPlayAnimation] = useState(false);
   const t = useAFFiNEI18N();
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      onClick?.(e);
+      setPlayAnimation(!active);
+    },
+    [active, onClick]
+  );
   return (
     <Tooltip content={active ? t['Favorited']() : t['Favorite']()} side="top">
-      <IconButton
-        ref={ref}
-        active={active}
-        onClick={e => {
-          e.stopPropagation();
-          onClick?.(e);
-        }}
-        {...props}
-      >
+      <IconButton ref={ref} active={active} onClick={handleClick} {...props}>
         {active ? (
-          <FavoritedIcon data-testid="favorited-icon" />
+          playAnimation ? (
+            <Lottie
+              loop={false}
+              animationData={favoritedAnimation}
+              onComplete={() => setPlayAnimation(false)}
+              style={{ width: '20px', height: '20px' }}
+            />
+          ) : (
+            <FavoritedIcon data-testid="favorited-icon" />
+          )
         ) : (
           <FavoriteIcon />
         )}