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();
-  return (
+  const handleClick = useCallback(
-    <Tooltip content={active ? t['Favorited']() : t['Favorite']()} side="top">
+    (e: React.MouseEvent<HTMLButtonElement>) => {
-      <IconButton
-        ref={ref}
-        active={active}
-        onClick={e => {
       e.stopPropagation();
       onClick?.(e);
-        }}
+      setPlayAnimation(!active);
-        {...props}
+    },
-      >
+    [active, onClick]
+  );
+  return (
+    <Tooltip content={active ? t['Favorited']() : t['Favorite']()} side="top">
+      <IconButton ref={ref} active={active} onClick={handleClick} {...props}>
         {active ? (
+          playAnimation ? (
+            <Lottie
+              loop={false}
+              animationData={favoritedAnimation}
+              onComplete={() => setPlayAnimation(false)}
+              style={{ width: '20px', height: '20px' }}
+            />
+          ) : (
             <FavoritedIcon data-testid="favorited-icon" />
+          )
         ) : (
           <FavoriteIcon />
         )}

yarn.lock

@@ -202,6 +202,7 @@ __metadata:
     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
@@ -25414,7 +25415,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lottie-web@npm:^5.12.2":
+"lottie-react@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "lottie-react@npm:2.4.0"
+  dependencies:
+    lottie-web: ^5.10.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: e9ea4a89be90a29bde4a83956f76a80d1f8031882f18ea38ef5271d2aafd8e68348ae6297f185ed85b149ca4896fe33aee7faf9780b88a1b289b8e146f477448
+  languageName: node
+  linkType: hard
+
+"lottie-web@npm:^5.10.2, lottie-web@npm:^5.12.2":
   version: 5.12.2
   resolution: "lottie-web@npm:5.12.2"
   checksum: af5bc3bc405fd760de8b17a36158d5a8c3e8c586c711d0c63681ddf056b65bc6b54ea36b1fcad782fb02dbe12e696a40e0ba72daf41b8f10ab5b5d1113793636