Feat: Add reusable shimmer component and loading state in task list

__tests__/unit/Shimmer.test.tsx

@@ -0,0 +1,33 @@
+import { ListShimmer, Shimmer } from "@/components/Shimmer";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+afterEach(() => {
+  cleanup();
+  vi.resetAllMocks();
+});
+
+describe("Shimmer Component Unit Test", () => {
+
+  test("should render the shimmer animation when loading", () => {
+    render(
+      <Shimmer />
+    );
+    const shimmerElement = screen.getByTestId("shimmer");
+    expect(shimmerElement).not.toBeNull();
+
+  });
+})
+
+describe("List Shimmer Component Unit Test", () => {
+
+  test("Should render the List shimmer animation when loading", () => {
+    render(
+      <ListShimmer count={5} />
+    );
+    const ListShimmerElement = screen.getByTestId('list-shimmer');
+    expect(ListShimmerElement.children.length).toBe(5);
+
+  });
+
+})

__tests__/utils/utils.test.ts

@@ -0,0 +1,41 @@
+import { cn } from "@/utils/utils";
+import { describe, expect, test } from "vitest";
+
+describe("cn utility function", () => {
+  test("combines class names correctly", () => {
+    // Test basic string concatenation
+    expect(cn("text-red-500", "bg-blue-500")).toBe("text-red-500 bg-blue-500");
+
+    // Test conditional classes
+    expect(cn("text-lg", true && "font-bold", false && "italic")).toBe(
+      "text-lg font-bold"
+    );
+
+    // Test with arrays
+    expect(cn(["px-4", "py-2"])).toBe("px-4 py-2");
+
+    // Test with objects
+    expect(cn({ "border-2": true, rounded: true, shadow: false })).toBe(
+      "border-2 rounded"
+    );
+
+    // Test with mixed inputs
+    expect(
+      cn("flex", ["items-center", "justify-between"], {
+        "p-4": true,
+        "mx-auto": false,
+      })
+    ).toBe("flex items-center justify-between p-4");
+
+    // Test tailwind-merge functionality (conflicting classes)
+    expect(cn("p-2 p-4")).toBe("p-4");
+    expect(cn("text-red-500", "text-blue-500")).toBe("text-blue-500");
+    expect(cn("text-sm md:text-lg", "md:text-xl")).toBe("text-sm md:text-xl");
+
+    // Test more complex tailwind merge cases
+    expect(cn("w-full max-w-md", "w-auto")).toBe("max-w-md w-auto");
+    expect(cn("border-gray-200 border-2", "border-blue-500")).toBe(
+      "border-2 border-blue-500"
+    );
+  });
+});

app/tasks/page.tsx

@@ -6,11 +6,13 @@ import tasksData from "@/data/taskData.json";
 import { Task } from "@/app/types/tasks";
 import { FORM_MODE, TASK_STATUS } from "../constants/Task";
 import { TodoForm } from "@/components/TodoForm";
+import { ListShimmer } from "@/components/Shimmer";
 
 
 
 const Tasks = () => {
   const [tasks, setTasks] = useState<Task[]>([]);
+  const [isFetchingTaskData, setIsFetchingTaskData] = useState(true);
   const [isCreateAndEditFormVisible, setIsCreateAndEditFormVisible] = useState(false)
   const [activeTask, setActiveTask] = useState<Task | undefined>();
 
@@ -42,6 +44,13 @@ const Tasks = () => {
   }, []);
 
 
+  useEffect(() => {
+    setTimeout(() => {
+      setTasks(tasksData);
+      setIsFetchingTaskData(false);
+    }, 2000)
+  }, []);
+
   return (
     <>
       <div className="md:w-5/6 lg:w-3/4 w-full flex flex-row justify-end mx-auto p-2">
@@ -66,14 +75,17 @@ const Tasks = () => {
         <section
           className="w-full flex flex-col"
         >
-          <section data-testid="todo-section">
+          <section data-testid="todo-section"
+            aria-busy={isFetchingTaskData} aria-live="polite"
+          >
             <TaskHeader title="To Do" />
-            <TaskList tasks={todoTasks} setActiveTask={handleTaskSelect} />
+            {isFetchingTaskData ? <ListShimmer count={2} /> : <TaskList tasks={todoTasks} setActiveTask={handleTaskSelect} />}
           </section>
 
-          <section data-testid="in-progress-section">
+          <section data-testid="in-progress-section"
+            aria-busy={isFetchingTaskData} aria-live="polite">
             <TaskHeader title="In Progress" icon="/assets/InProgressEllipse.svg" />
-            <TaskList tasks={inProgressTasks} setActiveTask={handleTaskSelect} />
+            {isFetchingTaskData ? <ListShimmer count={2} /> : <TaskList tasks={inProgressTasks} setActiveTask={handleTaskSelect} />}
           </section>
         </section>
         <section

components/Shimmer.tsx

@@ -0,0 +1,23 @@
+import { cn } from '@/utils/utils'
+
+type ShimmerProps = {
+    className?: string;
+}
+
+export const Shimmer = ({
+    className,
+}: ShimmerProps) => {
+    return <div className={cn("animate-pulse relative overflow-hidden rounded-lg mx-3 bg-indigo-50 opacity-90 max-w-full h-full", className)} data-testid="shimmer" />
+
+};
+
+
+export const ListShimmer = ({ className, count }: { className?: string, count: number }) => {
+    return (
+        <div className={cn("h-24 flex flex-col gap-2", className)} data-testid="list-shimmer">
+            {[...Array(count)].map((_, index) => (
+                <Shimmer key={index} />
+            ))}
+        </div>
+    )
+}

package.json

@@ -13,10 +13,12 @@
   },
   "dependencies": {
     "@testing-library/user-event": "^14.6.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "next": "15.0.2",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "tailwind-merge": "^3.0.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",

utils/utils.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...input: ClassValue[]) {
+  return twMerge(clsx(input));
+}