feat(v2): animate file list

murgatt · Dec 3, 2023 · 376f806 · 376f806
1 parent 744c275
commit 376f806
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@formkit/auto-animate": "0.8.1",
     "@hookform/resolvers": "3.3.2",
     "@radix-ui/react-label": "2.0.2",
     "@radix-ui/react-navigation-menu": "1.1.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
@@ -1,3 +1,4 @@
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { ListXIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { getFiles, useStore } from 'src/store';
@@ -9,10 +10,11 @@ export const FileList = () => {
   const { t } = useTranslation();
   const files = useStore(getFiles);
   const clearFiles = useStore(state => state.clearFiles);
+  const [listRef] = useAutoAnimate();
 
   return (
     <div className="relative h-full">
-      <ul className="flex h-full flex-col gap-3 overflow-y-auto px-4 pb-14 pt-4">
+      <ul className="flex h-full flex-col gap-3 overflow-y-auto px-4 pb-14 pt-4" ref={listRef}>
         {files.map(file => (
           <li key={file.path}>
             <FileCard file={file} />