chore: layout improvement

Author: kemuru

web/src/pages/Jurors/DisplayJurors.tsx

@@ -47,8 +47,8 @@ const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) =>
       ...juror,
       rank: searchValue ? undefined : jurorSkip + index + 1,
     }));
-    if (!searchValue && order === "asc") {
-      return baseJurors?.map((juror) => ({
+    if (!searchValue && order === "asc" && baseJurors) {
+      return baseJurors.map((juror) => ({
         ...juror,
         rank: totalLeaderboardJurors - (juror.rank || 0) + 1,
       }));
@@ -67,15 +67,29 @@ const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) =>
 
   return (
     <>
-      {!isUndefined(jurors) && jurors.length === 0 ? (
-        <StyledLabel>No jurors found</StyledLabel>
-      ) : (
+      {isUndefined(totalLeaderboardJurors) ? (
         <>
           <ListContainer>
             <Header />
-            {!isUndefined(jurors)
-              ? jurors.map((juror) => <JurorCard key={juror.id} address={juror.id} {...juror} />)
-              : [...Array(jurorsPerPage)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
+            {[...Array(jurorsPerPage)].map((_, i) => (
+              <SkeletonDisputeListItem key={i} />
+            ))}
+          </ListContainer>
+          <StyledPagination currentPage={currentPage} numPages={totalPages} callback={handlePageChange} />
+        </>
+      ) : (
+        <>
+          <ListContainer>
+            {!isUndefined(jurors) && jurors.length === 0 ? (
+              <StyledLabel>No jurors found</StyledLabel>
+            ) : (
+              <>
+                <Header />
+                {!isUndefined(jurors)
+                  ? jurors.map((juror) => <JurorCard key={juror.id} address={juror.id} {...juror} />)
+                  : [...Array(jurorsPerPage)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
+              </>
+            )}
           </ListContainer>
           <StyledPagination currentPage={currentPage} numPages={totalPages} callback={handlePageChange} />
         </>

web/src/pages/Jurors/index.tsx

@@ -4,11 +4,8 @@ import styled, { css } from "styled-components";
 import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
-import Skeleton from "react-loading-skeleton";
 import { useAccount } from "wagmi";
 
-import { isUndefined } from "utils/index";
-
 import { useTotalLeaderboardJurors } from "queries/useTotalLeaderboardJurors";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
@@ -58,18 +55,14 @@ const Jurors: React.FC = () => {
         <Header>
           <StyledTitle>Jurors Leaderboard</StyledTitle>
           {isConnected ? (
-            <StyledArrowLink to={"/profile/1/desc/all"}>
+            <StyledArrowLink to="/profile/1/desc/all">
               My Profile <ArrowIcon />
             </StyledArrowLink>
           ) : null}
         </Header>
         <Search />
         <StatsAndFilters totalJurors={totalLeaderboardJurors} />
-        {!isUndefined(totalLeaderboardJurors) && Number(totalLeaderboardJurors) > 0 ? (
-          <DisplayJurors totalLeaderboardJurors={Number(totalLeaderboardJurors)} />
-        ) : (
-          <Skeleton height={1000} />
-        )}
+        <DisplayJurors totalLeaderboardJurors={totalLeaderboardJurors} />
       </Container>
       <ScrollTop />
     </>