Fix styles for loading and pagination

src/components/Projects/ListProjectSolutions.tsx

@@ -239,21 +239,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
     <section>
       {leavingRoadmapModal}
 
-      <Pagination
+      <div className="flex flex-col divide-y divide-gray-100 min-h-[500px]">
-        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">
         {solutions?.data.map((solution, counter) => {
           const isVisited = alreadyVisitedSolutions[solution._id!];
           const avatar = solution.user.avatar || '';
@@ -325,6 +311,8 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
         })}
       </div>
 
+      {(solutions?.totalPages || 0) > 1 && (
+        <div className="mt-4">
           <Pagination
             totalPages={solutions?.totalPages || 1}
             currPage={solutions?.currPage || 1}
@@ -337,6 +325,8 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
               });
             }}
           />
+        </div>
+      )}
     </section>
   );
 }

src/components/Projects/LoadingSolutions.tsx

@@ -1,11 +1,19 @@
 export function LoadingSolutions() {
   return (
-    <ul className="flex flex-col gap-2">
+    <ul className="flex flex-col divide-y divide-transparent min-h-[500px]">
-      {new Array(21).fill(0).map((_, index) => (
+      {new Array(11).fill(0).map((_, index) => (
-        <li
+        <li key={index} className="flex h-[44px] items-center justify-between">
-          key={index}
+          <span className="flex items-center">
-          className="h-[76px] animate-pulse rounded-md border bg-gray-200"
+            <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>
   );

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;