add components with custom skeleton

ui/address/AddressLogs.tsx

-import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import ActionBar from 'ui/shared/ActionBar';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import DataListDisplay from 'ui/shared/DataListDisplay';
 import LogItem from 'ui/shared/logs/LogItem';
 import LogSkeleton from 'ui/shared/logs/LogSkeleton';
 import Pagination from 'ui/shared/Pagination';
@@ -20,35 +19,26 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     scrollRef,
   });
 
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  const bar = isPaginationVisible ? (
+  const actionBar = isPaginationVisible ? (
     <ActionBar mt={ -6 } showShadow>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
   ) : null;
 
-  if (isLoading) {
-    return (
-      <Box>
-        { bar }
-        <LogSkeleton/>
-        <LogSkeleton/>
-      </Box>
-    );
-  }
+  const content = data?.items ? data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) : null;
 
-  if (data.items.length === 0) {
-    return <span>There are no logs for this address.</span>;
-  }
+  const skeleton = <><LogSkeleton/><LogSkeleton/></>;
 
   return (
-    <>
-      { bar }
-      { data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) }
-    </>
+    <DataListDisplay
+      isError={ isError }
+      isLoading={ isLoading }
+      items={ data?.items }
+      emptyText="There are no logs for this address."
+      content={ content }
+      actionBar={ actionBar }
+      customSkeleton={ skeleton }
+    />
   );
 };
 

ui/address/tokens/TokensWithIds.tsx

-import { Grid, Skeleton, Text } from '@chakra-ui/react';
+import { Grid, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -6,7 +6,7 @@ import type { AddressTokensResponse } from 'types/api/address';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import DataListDisplay from 'ui/shared/DataListDisplay';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
 
@@ -24,52 +24,48 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
 
   const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
 
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  const bar = isMobile && isPaginationVisible && (
+  const actionBar = isMobile && isPaginationVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
   );
 
-  if (isLoading) {
-    return (
-      <>
-        { bar }
-        <Grid
-          w="100%"
-          columnGap={{ base: 3, lg: 6 }}
-          rowGap={{ base: 3, lg: 6 }}
-          gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
-        >
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-        </Grid>
-      </>
-    );
-  }
+  const skeleton = (
+    <Grid
+      w="100%"
+      columnGap={{ base: 3, lg: 6 }}
+      rowGap={{ base: 3, lg: 6 }}
+      gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
+    >
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+    </Grid>
+  );
 
-  if (!data.items.length) {
-    return <Text as="span">There are no tokens of selected type.</Text>;
-  }
+  const content = data?.items ? (
+    <Grid
+      w="100%"
+      columnGap={{ base: 3, lg: 6 }}
+      rowGap={{ base: 3, lg: 6 }}
+      gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
+    >
+      { data.items.map(item => <NFTItem key={ item.token.address } { ...item }/>) }
+    </Grid>
+  ) : null;
 
   return (
-    <>
-      { bar }
-      <Grid
-        w="100%"
-        columnGap={{ base: 3, lg: 6 }}
-        rowGap={{ base: 3, lg: 6 }}
-        gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
-      >
-        { data.items.map(item => <NFTItem key={ item.token.address } { ...item }/>) }
-      </Grid>
-    </>
+    <DataListDisplay
+      isError={ isError }
+      isLoading={ isLoading }
+      items={ data?.items }
+      emptyText="There are no tokens of selected type."
+      content={ content }
+      actionBar={ actionBar }
+      customSkeleton={ skeleton }
+    />
   );
 };
 

ui/address/tokens/TokensWithoutIds.tsx

@@ -42,6 +42,7 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => {
       isError={ isError }
       isLoading={ isLoading }
       items={ data?.items }
+      isLongSkeleton
       skeletonDesktopColumns={ [ '30%', '30%', '10%', '20%', '10%' ] }
       emptyText="There are no tokens of selected type."
       content={ content }

ui/shared/DataListDisplay.tsx

@@ -13,10 +13,11 @@ type Props = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   items?: Array<any>;
   emptyText: string;
-  skeletonDesktopColumns: Array<string>;
+  skeletonDesktopColumns?: Array<string>;
   isLongSkeleton?: boolean;
   actionBar?: React.ReactNode;
   content: React.ReactNode;
+  customSkeleton?: React.ReactNode;
   className?: string;
   hasActiveFilters?: boolean;
   emptyFilteredText?: string;
@@ -28,15 +29,20 @@ const DataListDisplay = (props: Props) => {
   }
 
   if (props.isLoading) {
+
     return (
       <>
         { props.actionBar }
-        <SkeletonList display={{ base: 'block', lg: 'none' }}/>
-        <SkeletonTable
-          display={{ base: 'none', lg: 'block' }}
-          columns={ props.skeletonDesktopColumns }
-          isLong={ props.isLongSkeleton }
-        />
+        { props.customSkeleton || (
+          <>
+            <SkeletonList display={{ base: 'block', lg: 'none' }}/>
+            <SkeletonTable
+              display={{ base: 'none', lg: 'block' }}
+              columns={ props.skeletonDesktopColumns || [] }
+              isLong={ props.isLongSkeleton }
+            />
+          </>
+        ) }
       </>
     );
   }

ui/token/TokenInventory.tsx

-import { Grid, Text, Skeleton } from '@chakra-ui/react';
+import { Grid, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -6,7 +6,7 @@ import type { TokenInventoryResponse } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import DataListDisplay from 'ui/shared/DataListDisplay';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
 
@@ -21,53 +21,51 @@ type Props = {
 
 const TokenInventory = ({ inventoryQuery }: Props) => {
   const isMobile = useIsMobile();
-  if (inventoryQuery.isError) {
-    return <DataFetchAlert/>;
-  }
 
-  const bar = isMobile && inventoryQuery.isPaginationVisible && (
+  const actionBar = isMobile && inventoryQuery.isPaginationVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...inventoryQuery.pagination }/>
     </ActionBar>
   );
 
-  if (inventoryQuery.isLoading) {
-    return (
-      <>
-        { bar }
-        <Grid
-          w="100%"
-          columnGap={{ base: 3, lg: 6 }}
-          rowGap={{ base: 3, lg: 6 }}
-          gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
-        >
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
-        </Grid>
-      </>
-    );
-  }
+  const skeleton = (
+    <Grid
+      w="100%"
+      columnGap={{ base: 3, lg: 6 }}
+      rowGap={{ base: 3, lg: 6 }}
+      gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
+    >
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+      <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+    </Grid>
+  );
 
-  const items = inventoryQuery.data.items;
+  const items = inventoryQuery.data?.items;
 
-  if (!items?.length) {
-    return <Text as="span">There are no tokens.</Text>;
-  }
+  const content = items ? (
+    <Grid
+      w="100%"
+      columnGap={{ base: 3, lg: 6 }}
+      rowGap={{ base: 3, lg: 6 }}
+      gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
+    >
+      { items.map((item) => <TokenInventoryItem key={ item.token.address + '_' + item.id } item={ item }/>) }
+    </Grid>
+  ) : null;
 
   return (
-    <>
-      { bar }
-      <Grid
-        w="100%"
-        columnGap={{ base: 3, lg: 6 }}
-        rowGap={{ base: 3, lg: 6 }}
-        gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
-      >
-        { items.map((item) => <TokenInventoryItem key={ item.token.address + '_' + item.id } item={ item }/>) }
-      </Grid></>
+    <DataListDisplay
+      isError={ inventoryQuery.isError }
+      isLoading={ inventoryQuery.isLoading }
+      items={ items }
+      emptyText="There are no tokens."
+      content={ content }
+      actionBar={ actionBar }
+      customSkeleton={ skeleton }
+    />
   );
 };