Fix shimmer card component in mine page (#1284)

* fix: remove dev flag and related test and old UI code

* fix: change received value

* chore: change component name

* fix: change shimmer card ui

* fix: change shimmer card style and made it similar to task card

__tests__/Unit/pages/Mine/Mine.test.tsx

@@ -89,7 +89,7 @@ describe('Mine Page', () => {
 
         await waitFor(() =>
             expect(
-                getAllByTestId(/shimmer-card/i).length
+                getAllByTestId(/task-shimmer-card/i).length
             ).toBeGreaterThanOrEqual(1)
         );
     });

src/components/Loaders/taskCardShimmer/index.tsx

@@ -0,0 +1,15 @@
+import styles from './taskCardShimmer.module.scss';
+
+const TaskCardShimmer = () => (
+    <div className={`${styles.taskCard}`} data-testid="task-shimmer-card">
+        <div className={`${styles.title} ${styles.animate}`}></div>
+        <div className={`${styles.flexContainer}`}>
+            <div className={`${styles.estimated} ${styles.animate}`}></div>
+            <div className={`${styles.status} ${styles.animate}`}></div>
+        </div>
+        <div className={`${styles.started} ${styles.animate}`} />
+        <div className={`${styles.assignee} ${styles.animate}`} />
+    </div>
+);
+
+export default TaskCardShimmer;

src/components/Loaders/taskCardShimmer/taskCardShimmer.module.scss

@@ -0,0 +1,79 @@
+@import '../../../styles/variables.scss';
+
+.taskCard {
+    border: 2px solid $white;
+    box-shadow: 0px 0px 10px 0 $light-gray;
+    padding: 10px;
+    border-radius: 8px;
+
+    width: 55vw;
+    min-width: 300px;
+    min-height: 110px;
+
+    margin-bottom: 2rem;
+
+    & > * {
+        border-radius: 8px;
+        margin: 10px;
+    }
+
+    .title {
+        min-height: 25px;
+        width: 60%;
+    }
+
+    .estimated {
+        min-height: 25px;
+        width: 40%;
+    }
+
+    .started {
+        min-height: 25px;
+        width: 20%;
+    }
+
+    .status {
+        min-width: 25px;
+        width: 20%;
+    }
+
+    .assignee {
+        min-height: 25px;
+        width: 30%;
+    }
+}
+
+@keyframes fullView {
+    100% {
+        width: 100%;
+    }
+}
+
+.flexContainer {
+    display: flex;
+    justify-content: space-between;
+
+    & > * {
+        border-radius: 8px;
+    }
+}
+
+.animate {
+    animation: shimmer 2s infinite linear;
+    background: linear-gradient(
+        to right,
+        $shimmer-lighter 4%,
+        $shimmer-darker 25%,
+        $shimmer-lighter 36%
+    );
+    background-size: 1000px 100%;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -1000px 0;
+    }
+    100% {
+        background-position: 1000px 0;
+    }
+}

src/pages/mine/index.tsx

@@ -14,7 +14,7 @@ import { getActiveTab } from '@/utils/getActiveTab';
 import TaskList from '@/components/tasks/TaskList/TaskList';
 import getInputValueFromTaskField from '@/utils/getInputValueFromTaskField';
 import getFilteredTasks from '@/utils/getFilteredTasks';
-import CardShimmer from '@/components/Loaders/cardShimmer';
+import TaskCardShimmer from '@/components/Loaders/taskCardShimmer';
 
 export const searchTasks = (
     setFilteredTasks: (tasks: task[]) => void,
@@ -57,9 +57,9 @@ const Content = () => {
 
     if (isLoading)
         return (
-            <div className={styles.tasksContainer}>
+            <div className={styles.mineTasksContainer}>
                 {[...Array(5)].map((n: number, index) => (
-                    <CardShimmer key={index} />
+                    <TaskCardShimmer key={index} />
                 ))}
             </div>
         );