fix: layout shift if there is no rank, hide pagination if searching

Author: kemuru

web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx

@@ -2,38 +2,42 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { useToggle } from "react-use";
+import { useParams } from "react-router-dom";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import RankingIcon from "svgs/icons/ranking.svg";
 
+import { decodeURIFilter } from "utils/uri";
+
 import HowItWorks from "components/HowItWorks";
 import JurorLevels from "components/Popup/MiniGuides/JurorLevels";
 
 import Coherence from "./Coherence";
 import Rewards from "./Rewards";
 
-const Container = styled.div`
+const Container = styled.div<{ renderIcon?: boolean }>`
   display: none;
   width: 100%;
   background-color: ${({ theme }) => theme.lightBlue};
-  border 1px solid ${({ theme }) => theme.stroke};
+  border: 1px solid ${({ theme }) => theme.stroke};
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-bottom: 1px solid ${({ theme }) => theme.stroke};
   padding: 18.6px 32px;
 
-  ${landscapeStyle(
-    () => css`
-      display: grid;
-      grid-template-columns:
-        min-content repeat(3, ${responsiveSize(160, 180, 900)})
-        auto;
-      column-gap: ${responsiveSize(12, 28, 900)};
-      align-items: center;
-    `
-  )}
+  ${({ renderIcon }) =>
+    landscapeStyle(
+      () => css`
+        display: grid;
+        grid-template-columns: ${renderIcon
+          ? `min-content repeat(3, ${responsiveSize(160, 180, 900)}) auto`
+          : `repeat(3, ${responsiveSize(160, 180, 900)}) auto`};
+        column-gap: ${responsiveSize(12, 28, 900)};
+        align-items: center;
+      `
+    )}
 `;
 
 const StyledRankingIcon = styled(RankingIcon)`
@@ -53,10 +57,13 @@ const HowItWorksContainer = styled.div`
 
 export const DesktopHeader: React.FC = () => {
   const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
+  const { filter } = useParams();
+  const { id: searchValue } = decodeURIFilter(filter ?? "all");
+  const renderIcon = !searchValue;
 
   return (
-    <Container>
-      <StyledRankingIcon />
+    <Container renderIcon={renderIcon}>
+      {renderIcon ? <StyledRankingIcon /> : null}
       <StyledLabel>Juror</StyledLabel>
       <Rewards />
       <Coherence />

web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx

@@ -11,7 +11,7 @@ import JurorTitle from "./JurorTitle";
 import Rank from "./Rank";
 import Rewards from "./Rewards";
 
-const Container = styled.div`
+const Container = styled.div<{ renderRank?: boolean }>`
   ${hoverShortTransitionTiming}
   display: none;
   width: 100%;
@@ -21,28 +21,28 @@ const Container = styled.div`
   align-items: center;
   padding: 15.55px 32px;
 
-  ${landscapeStyle(
-    () => css`
-      display: grid;
-      grid-template-columns:
-        min-content repeat(3, ${responsiveSize(160, 180, 900)})
-        auto;
-      column-gap: ${responsiveSize(12, 28, 900)};
-    `
-  )}
+  ${({ renderRank }) =>
+    landscapeStyle(
+      () => css`
+        display: grid;
+        grid-template-columns: ${renderRank
+          ? `min-content repeat(3, ${responsiveSize(160, 180, 900)}) auto`
+          : `repeat(3, ${responsiveSize(160, 180, 900)}) auto`};
+        column-gap: ${responsiveSize(12, 28, 900)};
+      `
+    )}
 
   :hover {
     background-color: ${({ theme }) => theme.lightGrey}BB;
   }
 `;
 
 interface IDesktopCard {
-  rank: number;
+  rank?: number;
   address: string;
   totalCoherentVotes: string;
   totalResolvedVotes: string;
   totalResolvedDisputes: string;
-  coherenceScore: string;
 }
 
 const DesktopCard: React.FC<IDesktopCard> = ({
@@ -51,16 +51,18 @@ const DesktopCard: React.FC<IDesktopCard> = ({
   totalCoherentVotes,
   totalResolvedVotes,
   totalResolvedDisputes,
-  coherenceScore,
 }) => {
+  const renderRank = !!rank;
+
   return (
-    <Container>
-      <Rank rank={rank} />
+    <Container renderRank={renderRank}>
+      {renderRank && <Rank rank={rank} />}
       <JurorTitle address={address} />
       <Rewards address={address} />
       <Coherence {...{ totalCoherentVotes, totalResolvedVotes }} />
       <JurorLevel {...{ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }} />
     </Container>
   );
 };
+
 export default DesktopCard;

web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx

@@ -80,7 +80,6 @@ const HeaderCoherenceAndCoherence = styled.div`
 interface IMobileCard {
   rank: number;
   address: string;
-  coherenceScore: string;
   totalCoherentVotes: string;
   totalResolvedVotes: string;
   totalResolvedDisputes: string;
@@ -89,7 +88,6 @@ interface IMobileCard {
 const MobileCard: React.FC<IMobileCard> = ({
   rank,
   address,
-  coherenceScore,
   totalCoherentVotes,
   totalResolvedVotes,
   totalResolvedDisputes,

web/src/pages/Home/TopJurors/JurorCard/index.tsx

@@ -6,7 +6,6 @@ import MobileCard from "./MobileCard";
 interface IJurorCard {
   rank: number;
   address: `0x${string}`;
-  coherenceScore: string;
   totalCoherentVotes: string;
   totalResolvedVotes: string;
   totalResolvedDisputes: string;
@@ -15,12 +14,11 @@ interface IJurorCard {
 const JurorCard: React.FC<IJurorCard> = ({
   rank,
   address,
-  coherenceScore,
   totalCoherentVotes,
   totalResolvedVotes,
   totalResolvedDisputes,
 }) => {
-  const allProps = { rank, address, coherenceScore, totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes };
+  const allProps = { rank, address, totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes };
 
   return (
     <>

web/src/pages/Jurors/DisplayJurors.tsx

@@ -75,7 +75,9 @@ const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) =>
               <SkeletonDisputeListItem key={i} />
             ))}
           </ListContainer>
-          <StyledPagination currentPage={currentPage} numPages={totalPages} callback={handlePageChange} />
+          {!searchValue && (
+            <StyledPagination currentPage={currentPage} numPages={totalPages} callback={handlePageChange} />
+          )}
         </>
       ) : (
         <>
@@ -88,10 +90,12 @@ const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) =>
                 {!isUndefined(jurors)
                   ? jurors.map((juror) => <JurorCard key={juror.id} address={juror.id} {...juror} />)
                   : [...Array(jurorsPerPage)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
+                {!searchValue && (
+                  <StyledPagination currentPage={currentPage} numPages={totalPages} callback={handlePageChange} />
+                )}
               </>
             )}
           </ListContainer>
-          <StyledPagination currentPage={currentPage} numPages={totalPages} callback={handlePageChange} />
         </>
       )}
     </>