Added animations to task list

package.json

@@ -19,7 +19,8 @@
     "@reduxjs/toolkit": "^1.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-redux": "^7.2.5"
+    "react-redux": "^7.2.5",
+    "react-transition-group": "^4.4.2"
   },
   "private": "true"
 }

src/components/EmptyList.tsx

@@ -7,8 +7,7 @@ import InboxIcon from "@mui/icons-material/Inbox";
 export const EmptyList: React.FC = () => (
   <Box
     sx={{
-      padding: (theme) => theme.spacing(1),
-      paddingBottom: (theme) => theme.spacing(3),
+      paddingBottom: (theme) => theme.spacing(2),
       textAlign: "center",
     }}
   >

src/components/TodoList.tsx

@@ -1,26 +1,43 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import List from "@mui/material/List";
 import Paper from "@mui/material/Paper";
+import Collapse from "@mui/material/Collapse";
+
+import { TransitionGroup } from "react-transition-group";
 
 import { TodoItem } from "./TodoItem";
 import { useAppSelector } from "../hooks";
 import { EmptyList } from "./EmptyList";
+import { isTaskItem, TaskItemT } from "../types";
 
 export const TodoList: React.FC = () => {
   const tasks = useAppSelector((state) => state.todo.tasks);
 
+  const [list, setList] = useState<TaskItemT[] | {}[]>([]);
+
+  useEffect(() => {
+    if (tasks.length) setList(tasks);
+    else setList([{}]);
+  }, [tasks]);
+
   return (
     <Paper variant="outlined">
-      {tasks.length ? (
-        <List>
-          {tasks.map((task, index) => (
-            <TodoItem key={task.id} task={task} index={index} />
-          ))}
-        </List>
-      ) : (
-        <EmptyList />
-      )}
+      <List>
+        <TransitionGroup>
+          {list.map((task, index) =>
+            isTaskItem(task) ? (
+              <Collapse key={task.id}>
+                <TodoItem task={task} index={index} />
+              </Collapse>
+            ) : (
+              <Collapse key={"empty"}>
+                <EmptyList />
+              </Collapse>
+            )
+          )}
+        </TransitionGroup>
+      </List>
     </Paper>
   );
 };

src/types.ts

@@ -3,3 +3,7 @@ export type TaskItemT = {
   text: string;
   done: boolean;
 };
+
+export const isTaskItem = (el: TaskItemT | {}): el is TaskItemT => {
+  return "id" in el && "text" in el && "done" in el;
+};