Merge pull request #21 from decentrio/add_skeleton

dAdd skeleton
decentrio · Jan 8, 2025 · ead827c · ead827c
2 parents 51f699d + 7a84909
commit ead827c
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 75 deletions.
diff --git a/src/components/blocks/detail.tsx b/src/components/blocks/detail.tsx
@@ -87,7 +87,7 @@ export default function BlockDetails() {
                 </Text>
                 {
                     transactions?.length ?
-                        <TxTable transactions={transactions} /> :
+                        <TxTable transactions={transactions} isLoading={state.loading}/> :
                         <NoData />
                 }
             </Box>

diff --git a/src/components/blocks/list.tsx b/src/components/blocks/list.tsx
@@ -114,21 +114,6 @@ export function BlockList() {
   const { state, isItemLoaded, pageInfo, handlePageChange } = useBlocks();
   const isMobile = useBreakpointValue({ base: true, md: false });
 
-  if (!state?.items?.length) {
-    return (
-      <Center
-        borderRadius="20px"
-        bgColor="#F6F7F8"
-        py="5"
-        px="8"
-        minH="65vh"
-        w="full"
-      >
-        <Text>Nothing to show</Text>
-      </Center>
-    );
-  }
-
   return (
     <Box
       borderRadius="20px"
@@ -150,7 +135,7 @@ export function BlockList() {
             bg={"white"}
             gap={0}
           >
-            { state.items.map((item, index) => (
+            {state.items.map((item, index) => (
               <BlockItemMobile
                 key={`block-${index}`}
                 item={item}
@@ -176,7 +161,18 @@ export function BlockList() {
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              {!state.loading ? state.items.map((item, index) => (
+              {!state.loading ? state.items.length === 0 ? (
+                <Center
+                  borderRadius="20px"
+                  bgColor="#F6F7F8"
+                  py="5"
+                  px="8"
+                  minH="65vh"
+                  w="full"
+                >
+                  <Text>Nothing to show</Text>
+                </Center>
+              ) : state.items.map((item, index) => (
                 <BlockItemWindow
                   key={`block-${index}`}
                   item={item}

diff --git a/src/components/proposals/list.tsx b/src/components/proposals/list.tsx
@@ -8,7 +8,7 @@ import {
   Stack,
   StackSeparator,
   useBreakpointValue,
-  VStack,
+  Skeleton,
 } from "@chakra-ui/react";
 import { useProposals } from "./hooks";
 import useTranslation from "next-translate/useTranslation";
@@ -21,33 +21,33 @@ const ProposalItem = ({ proposal }) => {
   return isMobile ? (
     <Box bg="white" p={4}>
       <Flex justify="space-between" direction="column" align="center" gap={4} w={"full"}>
-        <Flex   justify="space-between" w="full">
+        <Flex justify="space-between" w="full">
           <Link
-          w={'60%'}
-          fontSize={'sm'}
+            w={'60%'}
+            fontSize={'sm'}
             href={`/proposals/${proposal.id}`}
             fontWeight="bold"
             color="gray.700"
           >
             #{proposal.id} {proposal.title}
           </Link>
-        <Badge
-          colorPalette={statusInfo.tag}
-          px={2}
-          py={1}
-          w={"80px"}
-          height={"30px"}
-          textAlign={"center"}
-          justifyContent={"center"}
-          fontSize={"sm"}
-          borderRadius="md"
-        >
-          {statusInfo.value}
-        </Badge>
+          <Badge
+            colorPalette={statusInfo.tag}
+            px={2}
+            py={1}
+            w={"80px"}
+            height={"30px"}
+            textAlign={"center"}
+            justifyContent={"center"}
+            fontSize={"sm"}
+            borderRadius="md"
+          >
+            {statusInfo.value}
+          </Badge>
         </Flex>
-          <Text color="gray.500" fontSize="sm">
-            {proposal.description}
-          </Text>
+        <Text color="gray.500" fontSize="sm">
+          {proposal.description}
+        </Text>
       </Flex>
     </Box>
   ) : (
@@ -83,9 +83,31 @@ const ProposalItem = ({ proposal }) => {
   );
 };
 
+const SkeletonItem = () => {
+  const isMobile = useBreakpointValue({ base: true, md: false });
+  return isMobile ? (
+    <Box bg="white" p={4}>
+      <Flex justify="space-between" direction="column" align="center" gap={4} w={"full"}>
+        <Flex justify="space-between" w="full">
+          <Skeleton h={"20px"} w="full" mb="4" />
+        </Flex>
+        <Skeleton h={"20px"} w="full" mb="4" />
+      </Flex>
+    </Box>
+  ) : (
+    <Box bg="white" p={4}>
+      <Flex justify="space-between" align="center" mb={2} w={"full"}>
+        <Flex direction={"column"} w="80%">
+          <Skeleton h={"20px"} w="full" mb="4" />
+        </Flex>
+        <Skeleton h={"20px"} w="full" mb="4" />
+      </Flex>
+    </Box>
+  )
+}
+
 const ProposalList = () => {
   const { state } = useProposals();
-  console.log(state.items);
   return (
     <Box
       bg="#f9f9f9"
@@ -94,6 +116,7 @@ const ProposalList = () => {
       overflowY="hidden"
       overflowX="hidden"
       maxH="auto"
+      minH={"85vh"}
       borderRadius="md"
     >
       <Text fontSize="lg" fontWeight="bold" mb={4}>
@@ -109,10 +132,13 @@ const ProposalList = () => {
         separator={<StackSeparator />}
         px={3}
       >
-        {state?.items?.length &&
+        {!state.loading ? state?.items?.length &&
           state?.items.map((proposal, index) => (
             <ProposalItem proposal={proposal} key={`proposal-${index}`} />
-          ))}
+          )) : Array.from({ length: 10 }).map((_, index) => (
+            <SkeletonItem key={`proposal-${index}`} />
+          ))
+        }
       </Stack>
     </Box>
   );

diff --git a/src/components/transactions/list.tsx b/src/components/transactions/list.tsx
@@ -2,19 +2,10 @@ import { Box, Center, Text } from "@chakra-ui/react";
 import { useTransactions } from "./hooks";
 import Pagination from "../layout/pagination";
 import TxTable from "./table";
-import NoData from "../helper/nodata";
 
 export function TransactionList() {
     const { state, pageInfo, handlePageChange } = useTransactions();
 
-    if (!state?.items?.length) {
-        return (
-            <Center borderRadius="20px" bgColor="#F6F7F8" py="5" px="8" minH="65vh" w="full">
-                <NoData />
-            </Center>
-        );
-    }
-
     return (
         <Box borderRadius="20px" bgColor="#F6F7F8" py="5" px="8" overflow={'auto'} w="full">
             <Text fontSize="2xl" fontWeight="bold" mb="4">

diff --git a/src/components/transactions/table.tsx b/src/components/transactions/table.tsx
@@ -10,14 +10,15 @@ import {
   Link as ChakraLink,
   VStack,
   StackSeparator,
-  Skeleton,
+  Center,
 } from "@chakra-ui/react";
-import {TxItem, SkeletonTxItem} from "@/components/transactions/item";
+import { TxItem, SkeletonTxItem } from "@/components/transactions/item";
 import Link from "next/link";
 import { getMiddleEllipsis } from "@/utils/get_middle_ellipsis";
 import numeral from "numeral";
 import dayjs from "@/utils/dayjs";
 import { Status } from "../ui/status";
+import NoData from "../helper/nodata";
 
 const TxItemMobile = ({ item, rowIndex }) => {
   return (
@@ -60,15 +61,7 @@ const TxItemMobile = ({ item, rowIndex }) => {
 
 export default function TxTable({ transactions, isLoading }) {
   const isMobile = useBreakpointValue({ base: true, md: false });
-  if (!transactions?.length) return;
-  <Flex justify="center" align="center" h="100px">
-    <Box textAlign="center" color="gray.400">
-      <Box alignItems="center" boxSize="100px">
-        <Image src="/images/logo.svg" h={100} width={100} alt="test" />
-      </Box>
-      <Text mt={2}>Nothing to show</Text>
-    </Box>
-  </Flex>;
+
   return !isMobile ? (
     <Box bg="white" borderRadius="md" overflowY="auto" maxH="auto">
       <Table.Root showColumnBorder={false} h="full" w="full">
@@ -83,7 +76,11 @@ export default function TxTable({ transactions, isLoading }) {
         </Table.Header>
         <Table.Body>
           {
-            !isLoading ? (
+            !isLoading ? transactions.length === 0 ? (
+              <Center borderRadius="20px" bgColor="#F6F7F8" py="5" px="8" minH="65vh" w="full">
+                <NoData />
+              </Center>
+            ) : (
               <For each={transactions}>
                 {(item, index) => <TxItem item={item} rowIndex={index} />}
               </For>

diff --git a/src/components/validators/list.tsx b/src/components/validators/list.tsx
@@ -6,14 +6,13 @@ import {
   Button,
   Tabs,
   VStack,
-  HStack,
+  Skeleton,
   Link,
   useBreakpointValue,
   Flex,
   Center,
   Grid,
   StackSeparator,
-  Skeleton
 } from "@chakra-ui/react";
 import { ProgressBar, ProgressRoot } from "@/components/ui/progress";
 import { useValidators } from "./hooks";
@@ -29,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}`} />
         ))}
       </>
     );
@@ -61,8 +54,8 @@ const ValidatorItemMobile = ({ item }) => {
       //   boxShadow="sm"
       w="full"
       mb={4}
-      //   border="1px solid"
-      //   borderColor="gray.200"
+    //   border="1px solid"
+    //   borderColor="gray.200"
     >
       <VStack align="stretch">
         <Flex direction={"column"} justify="space-between" gap={1} mb={2}>
@@ -116,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);
@@ -178,7 +196,7 @@ const ValidatorList = () => {
   const { state, handleTabChange, handleSearch, handleSort, sortItems } =
     useValidators();
   const validatorsMemo = useShallowMemo(state.items.map((x) => x.validator));
-  const { profiles: dataProfiles, loading } = useProfilesRecoil(validatorsMemo);
+  const { profiles: dataProfiles } = useProfilesRecoil(validatorsMemo);
   const items = useMemo(
     () =>
       sortItems(