From 03352e4bc9358ef6e8c82cb58e88564f3ab6aa83 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 23 Aug 2022 09:35:15 +0300
Subject: [PATCH] feat: add skeletons to roles-tabs

---
 .../RolesSkillsTab.Skeleton.tsx               | 44 +++++++++++++++++++
 .../RolesSkillsTab/RolesSkillsTab.tsx         |  3 +-
 src/mocks/handlers.ts                         |  2 +-
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.Skeleton.tsx

diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.Skeleton.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.Skeleton.tsx
new file mode 100644
index 0000000..b84e4ce
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.Skeleton.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import Card from 'src/Components/Card/Card';
+import Skeleton from 'react-loading-skeleton';
+import { random } from 'src/utils/helperFunctions';
+
+export default function RolesSkillsTabSkeleton() {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+            <div className="col-span-2 flex flex-col gap-24">
+                <Card>
+                    <p className="text-body2 font-bold"><Skeleton width="15ch" /></p>
+                    <p className="text-body4 text-gray-600 mt-8">
+                        <Skeleton width="90%" />
+                    </p>
+                    <ul className=' flex flex-wrap gap-8 mt-24'>
+                        {Array(10).fill(0).map((_, idx) => {
+
+                            return <div
+                                key={idx}
+                                className={`px-12 py-8 border rounded-10 text-body5 font-medium`}
+                            ><Skeleton width={`${Math.round(random(8, 15))}ch`} />
+                            </div>
+                        })}
+                    </ul>
+                    <div className="py-80"></div>
+                </Card>
+                <Card>
+                    <p className="text-body2 font-bold"><Skeleton width="12ch" /></p>
+                    <p className="text-body4 text-gray-600 mt-8">
+                        <Skeleton width="80%" />
+                    </p>
+                    <ul className=' flex flex-wrap gap-x-8 gap-y-20 mt-16'>
+                        {Array(8).fill(0).map((_, idx) => <li key={idx} className="px-16 py-8 bg-gray-100 rounded-48 text-body5 font-medium">
+                            <Skeleton width={`${Math.round(random(3, 12))}ch`} />
+                        </li>)}
+                    </ul>
+                </Card>
+            </div>
+            <div className="">
+
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
index 7a76d69..a858c58 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -12,6 +12,7 @@ import { UpdateUserRolesSkillsMutationVariables, useMyProfileRolesSkillsQuery, u
 import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import UpdateRolesCard from "./UpdateRolesCard/UpdateRolesCard";
 import UpdateSkillsCard from "./UpdateSkillsCard/UpdateSkillsCard";
+import RolesSkillsTabSkeleton from "./RolesSkillsTab.Skeleton";
 
 
 interface Props {
@@ -58,7 +59,7 @@ export default function PreferencesTab() {
 
 
     if (query.networkStatus === NetworkStatus.loading)
-        return <LoadingPage />
+        return <RolesSkillsTabSkeleton />
 
     if (!query.data || !query.data?.me)
         return <NotFoundPage />
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 9325296..453d0ef 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -229,7 +229,7 @@ export const handlers = [
         await delay()
         return res(
             ctx.data({
-                me: { ...me(), roles: [], skills: [] },
+                me: { ...me() },
                 getAllMakersRoles: getAllMakersRoles(),
                 getAllMakersSkills: getAllMakersSkills(),
             })