From d8972219b039a125e9331983bb3410337a85173d Mon Sep 17 00:00:00 2001
From: Jixun Wu <jixun.moe@gmail.com>
Date: Sun, 21 May 2023 15:38:52 +0100
Subject: [PATCH] chore: remove item based on animation exit event

---
 src/features/file-listing/FileRow.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 71d7133..1355185 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -18,6 +18,7 @@ import {
 import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
 import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
 import { useAppDispatch } from '~/hooks';
+import { AnimationDefinition } from 'framer-motion';
 import noCoverFallbackImageURL from '~/assets/no-cover.svg';
 
 interface FileRowProps {
@@ -48,15 +49,21 @@ export function FileRow({ id, file }: FileRowProps) {
     }
   };
 
-  const handleDeleteRow = useCallback(() => {
-    onClose();
-    setTimeout(() => {
+  const onCollapseAnimationComplete = (definition: AnimationDefinition) => {
+    if (definition === 'exit') {
       dispatch(deleteFile({ id }));
-    }, 500);
-  }, [dispatch, id, onClose]);
+    }
+  };
 
   return (
-    <Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%', padding: '0.25rem' }}>
+    <Collapse
+      in={isOpen}
+      animateOpacity
+      unmountOnExit
+      startingHeight={0}
+      onAnimationComplete={onCollapseAnimationComplete}
+      style={{ width: '100%', padding: '0.25rem' }}
+    >
       <Card w="full" data-testid="file-row">
         <CardBody>
           <FileRowResponsiveGrid>
@@ -111,7 +118,7 @@ export function FileRow({ id, file }: FileRowProps) {
                     </>
                   )}
                   <WrapItem>
-                    <Button type="button" onClick={handleDeleteRow}>
+                    <Button type="button" onClick={onClose}>
                       删除
                     </Button>
                   </WrapItem>