resolve conflict

src/components/validators/list.tsx

@@ -6,13 +6,13 @@ import {
   Button,
   Tabs,
   VStack,
+  Skeleton,
   Link,
   useBreakpointValue,
   Flex,
   Center,
   Grid,
   StackSeparator,
-  Skeleton
 } from "@chakra-ui/react";
 import { ProgressBar, ProgressRoot } from "@/components/ui/progress";
 import { useValidators } from "./hooks";
@@ -28,17 +28,11 @@ import SearchValidator from "./search";
 import { fetchColumns } from "./utils";
 import ColumnHeader from "./header";
 
-const SkeletonValidatorItems = ({ rowCount = 30, columnCount = 6 }) => {
+const SkeletonValidatorItems = ({ rowCount = 30 }) => {
     return (
       <>
         {Array.from({ length: rowCount }).map((_, rowIndex) => (
-          <Table.Row key={`skeleton-row-${rowIndex}`}>
-            {Array.from({ length: columnCount }).map((_, colIndex) => (
-              <Table.Cell key={`skeleton-cell-${rowIndex}-${colIndex}`}>
-                <Skeleton height="20px" />
-              </Table.Cell>
-            ))}
-          </Table.Row>
+          <SkeletonItem key={`skeleton-item-${rowIndex}`} />
         ))}
       </>
     );
@@ -115,6 +109,31 @@ const ValidatorItemMobile = ({ item }) => {
   );
 };
 
+const SkeletonItem = () => {
+  return (
+    <Table.Row>
+      <Table.Cell>
+        <Skeleton h={"20px"} w="full" mb="4" />
+      </Table.Cell>
+      <Table.Cell>
+        <Skeleton h={"20px"} w="full" mb="4" />
+      </Table.Cell>
+      <Table.Cell w={"30%"}>
+        <Skeleton h={"20px"} w="full" mb="4" />
+      </Table.Cell>
+      <Table.Cell textAlign={"right"}>
+        <Skeleton h={"20px"} w="full" mb="4" />
+      </Table.Cell>
+      <Table.Cell textAlign={"left"} pl={6}>
+        <Skeleton h={"20px"} w="full" mb="4" />
+      </Table.Cell>
+      <Table.Cell textAlign="left">
+        <Skeleton h={"20px"} w="full" mb="4" />
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
 const ValidatorItem = ({ item, idx }) => {
   const { t } = useTranslation("validators");
   const status = getValidatorStatus(item.status, item.jailed, item.tombstoned);
@@ -288,18 +307,19 @@ const ValidatorList = () => {
                   borderRadius: "xl",
                 }}
               >
-                {!state.loading ? items.map((val, idx) => (
-                  <ValidatorItem
-                    item={val}
-                    key={`$validator-${idx}`}
-                    idx={idx}
-                  />
-                )) : (
-                  Array.from({ length: 20 }).map(() => (
-                    <SkeletonItem/>
-                  )
+                {state.loading ? (
+                  <>
+                    <SkeletonValidatorItems />
+                  </>
+                ) : (
+                  items.map((val, idx) => (
+                    <ValidatorItem
+                      item={val}
+                      key={`$validator-${idx}`}
+                      idx={idx}
+                    />
                   ))
-                }
+                )}
               </Table.Body>
             </Table.Root>
           </Table.ScrollArea>