Skip to content

F
frontend
Commit c5d5c4d0 authored by isstuev's avatar isstuev
Browse files
Options

add components with custom skeleton

parent 9e2317e1
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 109 deletions
ui/address/AddressLogs.tsx
View file @ c5d5c4d0
import { Box } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import useQueryWithPages from 'lib/hooks/useQueryWithPages'; import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import getQueryParamString from 'lib/router/getQueryParamString'; import getQueryParamString from 'lib/router/getQueryParamString';
import ActionBar from 'ui/shared/ActionBar'; 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 LogItem from 'ui/shared/logs/LogItem';
import LogSkeleton from 'ui/shared/logs/LogSkeleton'; import LogSkeleton from 'ui/shared/logs/LogSkeleton';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
...@@ -20,35 +19,26 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement> ...@@ -20,35 +19,26 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
scrollRef, scrollRef,
}); });
if (isError) { const actionBar = isPaginationVisible ? (
return <DataFetchAlert/>;
}
const bar = isPaginationVisible ? (
<ActionBar mt={ -6 } showShadow> <ActionBar mt={ -6 } showShadow>
<Pagination ml="auto" { ...pagination }/> <Pagination ml="auto" { ...pagination }/>
</ActionBar> </ActionBar>
) : null; ) : null;
if (isLoading) { const content = data?.items ? data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) : null;
return (
<Box>
{ bar }
<LogSkeleton/>
<LogSkeleton/>
</Box>
);
}
if (data.items.length === 0) { const skeleton = <><LogSkeleton/><LogSkeleton/></>;
return <span>There are no logs for this address.</span>;
}
return ( return (
<> <DataListDisplay
{ bar } isError={ isError }
{ data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) } isLoading={ isLoading }
</> items={ data?.items }
emptyText="There are no logs for this address."
content={ content }
actionBar={ actionBar }
customSkeleton={ skeleton }
/>
); );
}; };
......
ui/address/tokens/TokensWithIds.tsx
View file @ c5d5c4d0
import { Grid, Skeleton, Text } from '@chakra-ui/react'; import { Grid, Skeleton } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -6,7 +6,7 @@ import type { AddressTokensResponse } from 'types/api/address'; ...@@ -6,7 +6,7 @@ import type { AddressTokensResponse } from 'types/api/address';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import ActionBar from 'ui/shared/ActionBar'; 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 type { Props as PaginationProps } from 'ui/shared/Pagination';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
...@@ -24,52 +24,48 @@ const TokensWithIds = ({ tokensQuery }: Props) => { ...@@ -24,52 +24,48 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery; const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
if (isError) { const actionBar = isMobile && isPaginationVisible && (
return <DataFetchAlert/>;
}
const bar = isMobile && isPaginationVisible && (
<ActionBar mt={ -6 }> <ActionBar mt={ -6 }>
<Pagination ml="auto" { ...pagination }/> <Pagination ml="auto" { ...pagination }/>
</ActionBar> </ActionBar>
); );
if (isLoading) { const skeleton = (
return ( <Grid
<> w="100%"
{ bar } columnGap={{ base: 3, lg: 6 }}
<Grid rowGap={{ base: 3, lg: 6 }}
w="100%" gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
columnGap={{ base: 3, lg: 6 }} >
rowGap={{ base: 3, lg: 6 }} <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
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"/> <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> </Grid>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> );
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
</Grid>
</>
);
}
if (!data.items.length) { const content = data?.items ? (
return <Text as="span">There are no tokens of selected type.</Text>; <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 ( return (
<> <DataListDisplay
{ bar } isError={ isError }
<Grid isLoading={ isLoading }
w="100%" items={ data?.items }
columnGap={{ base: 3, lg: 6 }} emptyText="There are no tokens of selected type."
rowGap={{ base: 3, lg: 6 }} content={ content }
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }} actionBar={ actionBar }
> customSkeleton={ skeleton }
{ data.items.map(item => <NFTItem key={ item.token.address } { ...item }/>) } />
</Grid>
</>
); );
}; };
......
ui/address/tokens/TokensWithoutIds.tsx
View file @ c5d5c4d0
...@@ -42,6 +42,7 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => { ...@@ -42,6 +42,7 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => {
isError={ isError } isError={ isError }
isLoading={ isLoading } isLoading={ isLoading }
items={ data?.items } items={ data?.items }
isLongSkeleton
skeletonDesktopColumns={ [ '30%', '30%', '10%', '20%', '10%' ] } skeletonDesktopColumns={ [ '30%', '30%', '10%', '20%', '10%' ] }
emptyText="There are no tokens of selected type." emptyText="There are no tokens of selected type."
content={ content } content={ content }
......
ui/shared/DataListDisplay.tsx
View file @ c5d5c4d0
...@@ -13,10 +13,11 @@ type Props = { ...@@ -13,10 +13,11 @@ type Props = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
items?: Array<any>; items?: Array<any>;
emptyText: string; emptyText: string;
skeletonDesktopColumns: Array<string>; skeletonDesktopColumns?: Array<string>;
isLongSkeleton?: boolean; isLongSkeleton?: boolean;
actionBar?: React.ReactNode; actionBar?: React.ReactNode;
content: React.ReactNode; content: React.ReactNode;
customSkeleton?: React.ReactNode;
className?: string; className?: string;
hasActiveFilters?: boolean; hasActiveFilters?: boolean;
emptyFilteredText?: string; emptyFilteredText?: string;
...@@ -28,15 +29,20 @@ const DataListDisplay = (props: Props) => { ...@@ -28,15 +29,20 @@ const DataListDisplay = (props: Props) => {
} }
if (props.isLoading) { if (props.isLoading) {
return ( return (
<> <>
{ props.actionBar } { props.actionBar }
<SkeletonList display={{ base: 'block', lg: 'none' }}/> { props.customSkeleton || (
<SkeletonTable <>
display={{ base: 'none', lg: 'block' }} <SkeletonList display={{ base: 'block', lg: 'none' }}/>
columns={ props.skeletonDesktopColumns } <SkeletonTable
isLong={ props.isLongSkeleton } display={{ base: 'none', lg: 'block' }}
/> columns={ props.skeletonDesktopColumns || [] }
isLong={ props.isLongSkeleton }
/>
</>
) }
</> </>
); );
} }
......
ui/token/TokenInventory.tsx
View file @ c5d5c4d0
import { Grid, Text, Skeleton } from '@chakra-ui/react'; import { Grid, Skeleton } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -6,7 +6,7 @@ import type { TokenInventoryResponse } from 'types/api/token'; ...@@ -6,7 +6,7 @@ import type { TokenInventoryResponse } from 'types/api/token';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import ActionBar from 'ui/shared/ActionBar'; 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 type { Props as PaginationProps } from 'ui/shared/Pagination';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
...@@ -21,53 +21,51 @@ type Props = { ...@@ -21,53 +21,51 @@ type Props = {
const TokenInventory = ({ inventoryQuery }: Props) => { const TokenInventory = ({ inventoryQuery }: Props) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
if (inventoryQuery.isError) {
return <DataFetchAlert/>;
}
const bar = isMobile && inventoryQuery.isPaginationVisible && ( const actionBar = isMobile && inventoryQuery.isPaginationVisible && (
<ActionBar mt={ -6 }> <ActionBar mt={ -6 }>
<Pagination ml="auto" { ...inventoryQuery.pagination }/> <Pagination ml="auto" { ...inventoryQuery.pagination }/>
</ActionBar> </ActionBar>
); );
if (inventoryQuery.isLoading) { const skeleton = (
return ( <Grid
<> w="100%"
{ bar } columnGap={{ base: 3, lg: 6 }}
<Grid rowGap={{ base: 3, lg: 6 }}
w="100%" gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
columnGap={{ base: 3, lg: 6 }} >
rowGap={{ base: 3, lg: 6 }} <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
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"/> <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
<Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/> </Grid>
<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) { const content = items ? (
return <Text as="span">There are no tokens.</Text>; <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 ( return (
<> <DataListDisplay
{ bar } isError={ inventoryQuery.isError }
<Grid isLoading={ inventoryQuery.isLoading }
w="100%" items={ items }
columnGap={{ base: 3, lg: 6 }} emptyText="There are no tokens."
rowGap={{ base: 3, lg: 6 }} content={ content }
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }} actionBar={ actionBar }
> customSkeleton={ skeleton }
{ items.map((item) => <TokenInventoryItem key={ item.token.address + '_' + item.id } item={ item }/>) } />
</Grid></>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment