refactor(web): add-no-juror-staked-notification-in-top-juror

Author: tractorss

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

@@ -29,6 +29,10 @@ const ListContainer = styled.div`
   )}
 `;
 
+const StyledLabel = styled.label`
+  font-size: 16px;
+`;
+
 const TopJurors: React.FC = () => {
   const { data: queryJurors } = useTopUsersByCoherenceScore();
 
@@ -40,12 +44,24 @@ const TopJurors: React.FC = () => {
   return (
     <Container>
       <Title>Top Jurors</Title>
-      <ListContainer>
-        <Header />
-        {!isUndefined(topJurors)
-          ? topJurors.map((juror) => <JurorCard key={juror.rank} address={juror.id} {...juror} />)
-          : [...Array(5)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
-      </ListContainer>
+
+      {!isUndefined(topJurors) && topJurors.length > 0 ? (
+        <ListContainer>
+          <Header />
+          {topJurors.map((juror) => (
+            <JurorCard key={juror.rank} address={juror.id} {...juror} />
+          ))}
+        </ListContainer>
+      ) : !isUndefined(topJurors) && topJurors.length === 0 ? (
+        <StyledLabel>There are no jurors staked yet.</StyledLabel>
+      ) : (
+        <ListContainer>
+          <Header />
+          {[...Array(5)].map((_, i) => (
+            <SkeletonDisputeListItem key={i} />
+          ))}
+        </ListContainer>
+      )}
     </Container>
   );
 };