diff --git a/src/components/blocks/detail.tsx b/src/components/blocks/detail.tsx
index f8f59f13b9..d9c7369720 100644
--- a/src/components/blocks/detail.tsx
+++ b/src/components/blocks/detail.tsx
@@ -87,7 +87,7 @@ export default function BlockDetails() {
{
transactions?.length ?
- :
+ :
}
diff --git a/src/components/blocks/list.tsx b/src/components/blocks/list.tsx
index 232751e303..83f513b0d3 100644
--- 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 (
-
- Nothing to show
-
- );
- }
-
return (
- { state.items.map((item, index) => (
+ {state.items.map((item, index) => (
- {!state.loading ? state.items.map((item, index) => (
+ {!state.loading ? state.items.length === 0 ? (
+
+ Nothing to show
+
+ ) : state.items.map((item, index) => (
{
return isMobile ? (
-
+
#{proposal.id} {proposal.title}
-
- {statusInfo.value}
-
+
+ {statusInfo.value}
+
-
- {proposal.description}
-
+
+ {proposal.description}
+
) : (
@@ -83,9 +83,31 @@ const ProposalItem = ({ proposal }) => {
);
};
+const SkeletonItem = () => {
+ const isMobile = useBreakpointValue({ base: true, md: false });
+ return isMobile ? (
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ )
+}
+
const ProposalList = () => {
const { state } = useProposals();
- console.log(state.items);
return (
{
overflowY="hidden"
overflowX="hidden"
maxH="auto"
+ minH={"85vh"}
borderRadius="md"
>
@@ -109,10 +132,13 @@ const ProposalList = () => {
separator={}
px={3}
>
- {state?.items?.length &&
+ {!state.loading ? state?.items?.length &&
state?.items.map((proposal, index) => (
- ))}
+ )) : Array.from({ length: 10 }).map((_, index) => (
+
+ ))
+ }
);
diff --git a/src/components/transactions/list.tsx b/src/components/transactions/list.tsx
index bf4e8c313b..2af83901cb 100644
--- 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 (
-
-
-
- );
- }
-
return (
diff --git a/src/components/transactions/table.tsx b/src/components/transactions/table.tsx
index 6db11adb5a..b5c54b476c 100644
--- 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;
-
-
-
-
-
- Nothing to show
-
- ;
+
return !isMobile ? (
@@ -83,7 +76,11 @@ export default function TxTable({ transactions, isLoading }) {
{
- !isLoading ? (
+ !isLoading ? transactions.length === 0 ? (
+
+
+
+ ) : (
{(item, index) => }
diff --git a/src/components/validators/list.tsx b/src/components/validators/list.tsx
index 39dadc8a3d..8fb27cfb4a 100644
--- 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) => (
-
- {Array.from({ length: columnCount }).map((_, colIndex) => (
-
-
-
- ))}
-
+
))}
);
@@ -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"
>
@@ -116,6 +109,31 @@ const ValidatorItemMobile = ({ item }) => {
);
};
+const SkeletonItem = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
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(