From 539508321d910753af1734ae16970f8362b3e21b Mon Sep 17 00:00:00 2001
From: maceteligolden <maceteligolden@gmail.com>
Date: Tue, 12 Dec 2023 04:25:28 +0100
Subject: [PATCH 1/4] feat: add kanban skeleton

---
 .../shared/skeleton/KanbanBoardSkeleton.tsx   | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx

diff --git a/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx b/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx
new file mode 100644
index 000000000..faa53b1a5
--- /dev/null
+++ b/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx
@@ -0,0 +1,40 @@
+import Skeleton from "react-loading-skeleton";
+
+const KanbanBoardSkeleton = () => {
+
+    let columns = Array.from(Array(3));
+
+    let tasks = Array.from(Array(2));
+
+    return (
+        <>
+            <div
+                className="flex flex-row justify-center gap-[20px] w-full min-h-[600px] p-[32px] bg-transparent dark:bg-[#181920]"
+            >
+               {columns.map((_, index: number)=> {
+                return (
+                    <>
+                    <div className="flex flex-col gap-[10px]" key={index}>
+                        <Skeleton height={40} width={325} borderRadius={10} className="dark:bg-[#353741]" />
+
+                        <div className="flex flex-col gap-[5px]">
+                        {tasks.map((_, index: number)=> {
+                            return (
+                                <>
+                                    <Skeleton key={index} height={155} width={325} borderRadius={10} className="dark:bg-[#353741]" />
+                                </>
+                            )
+                        })} 
+
+                            <Skeleton height={56} width={325} borderRadius={10} className="dark:bg-[#353741]" />
+                        </div>
+                    </div>
+                    </>
+                )
+               })}                       
+            </div>
+        </>
+    )
+}
+
+export default KanbanBoardSkeleton;
\ No newline at end of file

From f009b6d1966ba1615b21f18771bc498c84632204 Mon Sep 17 00:00:00 2001
From: maceteligolden <maceteligolden@gmail.com>
Date: Tue, 12 Dec 2023 04:26:01 +0100
Subject: [PATCH 2/4] feat:add skeleton to kanban board

---
 apps/web/pages/kanban/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx
index 592075453..9887bb646 100644
--- a/apps/web/pages/kanban/index.tsx
+++ b/apps/web/pages/kanban/index.tsx
@@ -1,4 +1,5 @@
 import { useKanban } from "@app/hooks/features/useKanban";
+import KanbanBoardSkeleton from "@components/shared/skeleton/KanbanBoardSkeleton";
 import { withAuthentication } from "lib/app/authenticator";
 import { KanbanView } from "lib/features/team-members-kanban-view"
 import { MainLayout } from "lib/layout";
@@ -13,7 +14,7 @@ const Kanban= () => {
            {Object.keys(data).length > 0 ? 
             <KanbanView kanbanBoardTasks={data}/>
             :
-            null
+            <KanbanBoardSkeleton/>
            }
         </MainLayout>
         </>

From 1fa32ef255e6c54a59b713e2df06c07934367604 Mon Sep 17 00:00:00 2001
From: maceteligolden <maceteligolden@gmail.com>
Date: Tue, 12 Dec 2023 08:27:19 +0100
Subject: [PATCH 3/4] update:add key to fragment

---
 .../shared/skeleton/KanbanBoardSkeleton.tsx         | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx b/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx
index faa53b1a5..9a0ee2e96 100644
--- a/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx
+++ b/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Skeleton from "react-loading-skeleton";
 
 const KanbanBoardSkeleton = () => {
@@ -13,23 +14,23 @@ const KanbanBoardSkeleton = () => {
             >
                {columns.map((_, index: number)=> {
                 return (
-                    <>
-                    <div className="flex flex-col gap-[10px]" key={index}>
+                    <React.Fragment key={index}>
+                    <div className="flex flex-col gap-[10px]">
                         <Skeleton height={40} width={325} borderRadius={10} className="dark:bg-[#353741]" />
 
                         <div className="flex flex-col gap-[5px]">
                         {tasks.map((_, index: number)=> {
                             return (
-                                <>
-                                    <Skeleton key={index} height={155} width={325} borderRadius={10} className="dark:bg-[#353741]" />
-                                </>
+                                <React.Fragment key={index}>
+                                    <Skeleton height={155} width={325} borderRadius={10} className="dark:bg-[#353741]" />
+                                </React.Fragment>
                             )
                         })} 
 
                             <Skeleton height={56} width={325} borderRadius={10} className="dark:bg-[#353741]" />
                         </div>
                     </div>
-                    </>
+                    </React.Fragment>
                 )
                })}                       
             </div>

From 68fd446b1dc410f75994f3ef378a5be9a751166a Mon Sep 17 00:00:00 2001
From: maceteligolden <maceteligolden@gmail.com>
Date: Tue, 12 Dec 2023 08:44:32 +0100
Subject: [PATCH 4/4] fix:resolve spacing issue and variable type

---
 .../shared/skeleton/KanbanBoardSkeleton.tsx   | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx b/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx
index 9a0ee2e96..523481c5b 100644
--- a/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx
+++ b/apps/web/components/shared/skeleton/KanbanBoardSkeleton.tsx
@@ -3,9 +3,9 @@ import Skeleton from "react-loading-skeleton";
 
 const KanbanBoardSkeleton = () => {
 
-    let columns = Array.from(Array(3));
+    const columns = Array.from(Array(3));
 
-    let tasks = Array.from(Array(2));
+    const tasks = Array.from(Array(2));
 
     return (
         <>
@@ -14,22 +14,22 @@ const KanbanBoardSkeleton = () => {
             >
                {columns.map((_, index: number)=> {
                 return (
-                    <React.Fragment key={index}>
-                    <div className="flex flex-col gap-[10px]">
-                        <Skeleton height={40} width={325} borderRadius={10} className="dark:bg-[#353741]" />
+                    <React.Fragment key={index}>
+                        <div className="flex flex-col gap-[10px]">
+                            <Skeleton height={40} width={325} borderRadius={10} className="dark:bg-[#353741]" />
 
-                        <div className="flex flex-col gap-[5px]">
-                        {tasks.map((_, index: number)=> {
-                            return (
-                                <React.Fragment key={index}>
-                                    <Skeleton height={155} width={325} borderRadius={10} className="dark:bg-[#353741]" />
-                                </React.Fragment>
-                            )
-                        })} 
+                            <div className="flex flex-col gap-[5px]">
+                                {tasks.map((_, index: number)=> {
+                                    return (
+                                        <React.Fragment key={index}>
+                                            <Skeleton height={155} width={325} borderRadius={10} className="dark:bg-[#353741]" />
+                                        </React.Fragment>
+                                    )
+                                })} 
 
-                            <Skeleton height={56} width={325} borderRadius={10} className="dark:bg-[#353741]" />
+                                <Skeleton height={56} width={325} borderRadius={10} className="dark:bg-[#353741]" />
+                            </div>
                         </div>
-                    </div>
                     </React.Fragment>
                 )
                })}