From 51ba38e4690830f0f82eddaafab4d5c4018c6da1 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 17 Aug 2024 00:06:40 +0100
Subject: [PATCH] Fix styles for loading and pagination

---
 .../Projects/ListProjectSolutions.tsx         | 44 +++++++------------
 src/components/Projects/LoadingSolutions.tsx  | 20 ++++++---
 src/components/Projects/ProjectTabs.tsx       |  2 +-
 3 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/components/Projects/ListProjectSolutions.tsx b/src/components/Projects/ListProjectSolutions.tsx
index 71a8194ef..5bdb48353 100644
--- a/src/components/Projects/ListProjectSolutions.tsx
+++ b/src/components/Projects/ListProjectSolutions.tsx
@@ -239,21 +239,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
     <section>
       {leavingRoadmapModal}
 
-      <Pagination
-        variant="minimal"
-        totalPages={solutions?.totalPages || 1}
-        currPage={solutions?.currPage || 1}
-        perPage={solutions?.perPage || 21}
-        totalCount={solutions?.totalCount || 0}
-        onPageChange={(page) => {
-          setPageState({
-            ...pageState,
-            currentPage: page,
-          });
-        }}
-      />
-
-      <div className="flex flex-col divide-y divide-gray-100">
+      <div className="flex flex-col divide-y divide-gray-100 min-h-[500px]">
         {solutions?.data.map((solution, counter) => {
           const isVisited = alreadyVisitedSolutions[solution._id!];
           const avatar = solution.user.avatar || '';
@@ -325,18 +311,22 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
         })}
       </div>
 
-      <Pagination
-        totalPages={solutions?.totalPages || 1}
-        currPage={solutions?.currPage || 1}
-        perPage={solutions?.perPage || 21}
-        totalCount={solutions?.totalCount || 0}
-        onPageChange={(page) => {
-          setPageState({
-            ...pageState,
-            currentPage: page,
-          });
-        }}
-      />
+      {(solutions?.totalPages || 0) > 1 && (
+        <div className="mt-4">
+          <Pagination
+            totalPages={solutions?.totalPages || 1}
+            currPage={solutions?.currPage || 1}
+            perPage={solutions?.perPage || 21}
+            totalCount={solutions?.totalCount || 0}
+            onPageChange={(page) => {
+              setPageState({
+                ...pageState,
+                currentPage: page,
+              });
+            }}
+          />
+        </div>
+      )}
     </section>
   );
 }
diff --git a/src/components/Projects/LoadingSolutions.tsx b/src/components/Projects/LoadingSolutions.tsx
index 72b1734ea..b4a1fb080 100644
--- a/src/components/Projects/LoadingSolutions.tsx
+++ b/src/components/Projects/LoadingSolutions.tsx
@@ -1,11 +1,19 @@
 export function LoadingSolutions() {
   return (
-    <ul className="flex flex-col gap-2">
-      {new Array(21).fill(0).map((_, index) => (
-        <li
-          key={index}
-          className="h-[76px] animate-pulse rounded-md border bg-gray-200"
-        />
+    <ul className="flex flex-col divide-y divide-transparent min-h-[500px]">
+      {new Array(11).fill(0).map((_, index) => (
+        <li key={index} className="flex h-[44px] items-center justify-between">
+          <span className="flex items-center">
+            <span className="block h-[28px] w-[28px] animate-pulse rounded-full bg-gray-200"></span>
+            <span
+              className={`ml-2 block h-[26px] w-[350px] animate-pulse rounded-full bg-gray-200`}
+            ></span>
+          </span>
+          <span className="flex items-center gap-2">
+            <span className={'w-[80px] rounded-full bg-gray-200 animated-pulse h-[26px]'}></span>
+            <span className={'w-[113px] rounded-full bg-gray-200 animated-pulse h-[26px]'}></span>
+          </span>
+        </li>
       ))}
     </ul>
   );
diff --git a/src/components/Projects/ProjectTabs.tsx b/src/components/Projects/ProjectTabs.tsx
index 2243974b6..953259167 100644
--- a/src/components/Projects/ProjectTabs.tsx
+++ b/src/components/Projects/ProjectTabs.tsx
@@ -18,7 +18,7 @@ export function ProjectTabs(props: ProjectTabsProps) {
   ];
 
   return (
-    <div className="my-3 flex flex-row flex-wrap items-center gap-1.5 rounded-md border bg-white px-2 text-sm">
+    <div className="my-3 flex flex-row flex-wrap items-center gap-1.5 rounded-md border bg-white px-2.5 text-sm">
       {tabs.map((tab) => {
         const isActive = tab.value === activeTab;