Skip to content

Commit

Permalink
feat: skeleton loaders (#19)
Browse files Browse the repository at this point in the history
closes ZKS-136
  • Loading branch information
0xtiti authored Aug 14, 2024
1 parent 0948c78 commit 52117eb
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 21 deletions.
32 changes: 19 additions & 13 deletions src/components/Gas.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
import { Typography, Box, styled } from '@mui/material';
import { Typography, Box, styled, Skeleton } from '@mui/material';
import Image from 'next/image';
import { useTranslation } from 'next-i18next';

import GasLight from '~/assets/icons/gasLight.svg';
import GasDark from '~/assets/icons/gasDark.svg';
import { useCustomTheme } from '~/hooks';
import { useCustomTheme, useData } from '~/hooks';
import { SBox } from '~/components';

export const Gas = () => {
const { theme } = useCustomTheme();
const { t } = useTranslation();
const { isEcosystemLoading } = useData();

return (
<GasContainer>
<Image src={theme === 'dark' ? GasDark : GasLight} alt='gas' />
<Box>
<SBox>
<GasLabel>{t('HOME.gasPrice')}:</GasLabel>
<GasValueText>10 wei</GasValueText>
</SBox>
<SBox>
<GasLabel>{t('HOME.transfer')}:</GasLabel>
<GasValueText>$10</GasValueText>
</SBox>
</Box>
{isEcosystemLoading && <Skeleton variant='rectangular' width={175} height={50} sx={{ borderRadius: 4 }} />}
{!isEcosystemLoading && (
<>
<Image src={theme === 'dark' ? GasDark : GasLight} alt='gas' />
<Box>
<SBox>
<GasLabel>{t('HOME.gasPrice')}:</GasLabel>
<GasValueText>10 wei</GasValueText>
</SBox>
<SBox>
<GasLabel>{t('HOME.transfer')}:</GasLabel>
<GasValueText>$10</GasValueText>
</SBox>
</Box>
</>
)}
</GasContainer>
);
};
Expand Down
43 changes: 43 additions & 0 deletions src/containers/ChainDetail/SkeletonChainDetail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { Box, Skeleton } from '@mui/material';

export const SkeletonChainDetail = () => {
return (
<Box sx={{ padding: 4 }} width='100%'>
{/* Breadcrumb Skeleton */}
<Skeleton variant='text' width='20%' height={40} sx={{ marginBottom: 2, borderRadius: 4 }} />

{/* Chain Metadata Skeleton */}
<Skeleton variant='rectangular' width='100%' height={150} sx={{ borderRadius: 4, marginBottom: 4 }} />

{/* Chain Information Skeleton */}
<Box sx={{ marginBottom: 4 }}>
<Skeleton variant='text' width='40%' height={60} sx={{ marginBottom: 2, borderRadius: 4 }} />
<Skeleton variant='rectangular' width='100%' height={80} sx={{ borderRadius: 4, marginBottom: 2 }} />
<Skeleton variant='rectangular' width='100%' height={80} sx={{ borderRadius: 4 }} />
</Box>

{/* RPCs Skeleton */}
<Box sx={{ marginBottom: 4 }}>
<Skeleton variant='text' width='40%' height={60} sx={{ marginBottom: 2, borderRadius: 4 }} />
<Skeleton variant='rectangular' width='100%' height={80} sx={{ borderRadius: 4, marginBottom: 2 }} />
</Box>

{/* Fee Params Skeleton */}
<Box sx={{ marginBottom: 4 }}>
<Skeleton variant='text' width='40%' height={60} sx={{ marginBottom: 2, borderRadius: 4 }} />
<Skeleton variant='rectangular' width='100%' height={80} sx={{ borderRadius: 4, marginBottom: 2 }} />
</Box>

{/* ZKChain TVL Skeleton */}
<Box>
<Skeleton variant='text' width='40%' height={60} sx={{ marginBottom: 2, borderRadius: 4 }} />
<Box>
<Skeleton variant='rectangular' width='100%' height={50} sx={{ marginBottom: 2 }} />
{[...Array(5)].map((_, index) => (
<Skeleton key={index} variant='rectangular' width='100%' height={50} sx={{ marginBottom: 1 }} />
))}
</Box>
</Box>
</Box>
);
};
19 changes: 14 additions & 5 deletions src/containers/ChainDetail/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
import { Box, styled } from '@mui/material';

import { useData } from '~/hooks';
import { ChainMetadata } from './ChainMetadata';
import { ChainDescription } from './ChainDescription';
import { SkeletonChainDetail } from './SkeletonChainDetail';
import { Breadcrumb } from '~/components';

export const ChainDetail = () => {
const { isChainLoading } = useData();

return (
<ChainContainer>
<Box>
<Breadcrumb isChain={true} />
<ChainMetadata />
</Box>
{isChainLoading && <SkeletonChainDetail />}
{!isChainLoading && (
<>
<Box>
<Breadcrumb isChain={true} />
<ChainMetadata />
</Box>

<ChainDescription />
<ChainDescription />
</>
)}
</ChainContainer>
);
};
Expand Down
34 changes: 34 additions & 0 deletions src/containers/Landing/SkeletonLanding.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Box } from '@mui/material';
import { Skeleton } from '@mui/material';

export const SkeletonLanding = () => {
return (
<Box width='100%'>
{/* Title Skeleton */}
<Skeleton variant='text' width='40%' height={80} sx={{ marginBottom: 4, borderRadius: 4 }} />

{/* Sub-Title Skeleton */}
<Skeleton variant='text' width='100%' height={60} sx={{ marginBottom: 4, borderRadius: 4 }} />

{/* Main Container Skeleton for Locked Assets */}
<Skeleton variant='rectangular' width='100%' height={300} sx={{ borderRadius: 4, marginBottom: 12 }} />

{/* Secondary Title Skeleton for Chain List */}
<Skeleton variant='text' width='30%' height={60} sx={{ marginBottom: 4, borderRadius: 4 }} />

{/* Table Skeleton */}
<Box>
<Skeleton variant='rectangular' width='100%' height={50} sx={{ marginBottom: 2, borderRadius: 4 }} />
{[...Array(6)].map((_, index) => (
<Skeleton
key={index}
variant='rectangular'
width='100%'
height={50}
sx={{ marginBottom: 1, borderRadius: 4 }}
/>
))}
</Box>
</Box>
);
};
15 changes: 12 additions & 3 deletions src/containers/Landing/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,22 @@ import { styled } from '@mui/material/styles';

import { Dashboard, LockedAssets } from '~/containers';
import { TitleBanner } from '~/components';
import { useData } from '~/hooks';
import { SkeletonLanding } from './SkeletonLanding';

export const Landing = () => {
const { isEcosystemLoading } = useData();

return (
<LandingContainer>
<TitleBanner />
<LockedAssets />
<Dashboard />
{isEcosystemLoading && <SkeletonLanding />}
{!isEcosystemLoading && (
<>
<TitleBanner />
<LockedAssets />
<Dashboard />
</>
)}
</LandingContainer>
);
};
Expand Down
4 changes: 4 additions & 0 deletions src/utils/services.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ import chainMockData from '~/data/chainMockData.json';

const { API_URL } = getConfig();

const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export const fetchEcosystemData = async () => {
// temporary for mock data
if (!API_URL) {
await delay(2000); // Simulate 2 seconds delay
return Promise.resolve(ecosystemMockData);
}
const res = await fetch(`${API_URL}/ecosystem`);
Expand All @@ -19,6 +22,7 @@ export const fetchEcosystemData = async () => {
export const fetchChainData = async (chainId: number) => {
// temporary for mock data
if (!API_URL) {
await delay(2000); // Simulate 2 seconds delay
return Promise.resolve(chainMockData);
}
const res = await fetch(`${API_URL}/zkchain/${chainId}`);
Expand Down

0 comments on commit 52117eb

Please sign in to comment.