From 1c06b650f3bc671bb5eea1e8bdce4a148341d858 Mon Sep 17 00:00:00 2001
From: Vignesh B S <55937928+VinuB-Dev@users.noreply.github.com>
Date: Tue, 24 Dec 2024 11:02:44 +0530
Subject: [PATCH] feat: add shimmer cards for task loading in dev mode (#1300)

- Added shimmer cards to display while tasks are being fetched in dev mode.
- Implemented tests to ensure correct rendering and behavior of shimmer cards.
---
 __tests__/Unit/pages/Tasks/index.test.tsx | 41 +++++++++++++++++++++++
 src/components/tasks/TasksContent.tsx     | 13 +++++++
 src/styles/tasks.module.scss              | 11 ++++++
 3 files changed, 65 insertions(+)

diff --git a/__tests__/Unit/pages/Tasks/index.test.tsx b/__tests__/Unit/pages/Tasks/index.test.tsx
index 8fdeff640..0cf69fabc 100644
--- a/__tests__/Unit/pages/Tasks/index.test.tsx
+++ b/__tests__/Unit/pages/Tasks/index.test.tsx
@@ -3,6 +3,7 @@ import Tasks from '@/pages/tasks';
 import { store } from '@/app/store';
 import { Provider } from 'react-redux';
 import { AppTreeType } from 'next/dist/shared/lib/utils';
+import { useGetAllTasksQuery } from '@/app/services/tasksApi';
 
 type TaskPageProps = {
     dev: boolean;
@@ -21,7 +22,47 @@ jest.mock('next/router', () => ({
     }),
 }));
 
+jest.mock('@/app/services/tasksApi', () => ({
+    useGetAllTasksQuery: jest.fn(),
+}));
+
 describe('Tasks', () => {
+    it('should display shimmer cards when isLoading is true and dev is true', () => {
+        (useGetAllTasksQuery as jest.Mock).mockReturnValue({
+            data: { tasks: [], next: '' },
+            isError: false,
+            isLoading: true,
+            isFetching: false,
+        });
+
+        render(
+            <Provider store={store()}>
+                <Tasks dev={true} />
+            </Provider>
+        );
+        const skeletonContainer = screen.getByTestId('task-skeleton-container');
+        expect(skeletonContainer).toBeInTheDocument();
+
+        const shimmerCards = screen.getAllByTestId('task-shimmer-card');
+        expect(shimmerCards).toHaveLength(5);
+    });
+
+    it('should display loading state when isLoading is true', () => {
+        (useGetAllTasksQuery as jest.Mock).mockReturnValue({
+            data: { tasks: [], next: '' },
+            isError: false,
+            isLoading: true,
+            isFetching: false,
+        });
+
+        render(
+            <Provider store={store()}>
+                <Tasks />
+            </Provider>
+        );
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
     it('should render the Tasks component', () => {
         render(
             <Provider store={store()}>
diff --git a/src/components/tasks/TasksContent.tsx b/src/components/tasks/TasksContent.tsx
index 23b370e51..7319c1f71 100644
--- a/src/components/tasks/TasksContent.tsx
+++ b/src/components/tasks/TasksContent.tsx
@@ -22,6 +22,7 @@ import {
 
 import useIntersection from '@/hooks/useIntersection';
 import TaskSearchDev from './TaskSearch/TaskSearch';
+import TaskCardShimmer from '../Loaders/taskCardShimmer';
 
 export const TasksContent = ({ dev }: { dev?: boolean }) => {
     const router = useRouter();
@@ -127,6 +128,18 @@ export const TasksContent = ({ dev }: { dev?: boolean }) => {
         earlyReturn: loadedTasks[selectedTab].length === 0,
     });
 
+    if (isLoading && dev)
+        return (
+            <div
+                className={styles.taskSkeletonContainer}
+                data-testid="task-skeleton-container"
+            >
+                {[...Array(5)].map((n: number, index) => (
+                    <TaskCardShimmer key={index} />
+                ))}
+            </div>
+        );
+
     if (isLoading) return <p>Loading...</p>;
 
     if (isError) return <p>{TASKS_FETCH_ERROR_MESSAGE}</p>;
diff --git a/src/styles/tasks.module.scss b/src/styles/tasks.module.scss
index 1635bf9c5..f61969427 100644
--- a/src/styles/tasks.module.scss
+++ b/src/styles/tasks.module.scss
@@ -4,6 +4,17 @@
     width: 64%;
 }
 
+.taskSkeletonContainer {
+    padding: 2rem 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    @media (max-width: 448px) {
+        padding: 2rem 1rem 0;
+    }
+}
+
 .container {
     text-align: center;
     display: flex;