Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: skeleton loader #21

Merged
merged 1 commit into from
Oct 11, 2024
Merged

feat: skeleton loader #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 120 additions & 43 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@tari/base-node-grpc-client": "file:../tari/clients/nodejs/base_node_grpc_client",
"echarts": "^5.4.3",
"echarts-for-react": "^3.0.2",
"framer-motion": "^11.11.7",
"grpc-promise": "^1.4.0",
"numeral": "^2.0.6",
"react": "^18.2.0",
Expand Down
135 changes: 100 additions & 35 deletions src/routes/Blocks/BlockTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
ButtonGroup,
FormControl,
MenuItem,
Stack,
} from '@mui/material';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import {
Expand All @@ -43,23 +44,33 @@ import {
formatTimestamp,
} from '../../utils/helpers';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';

import { useTheme } from '@mui/material/styles';
import CopyToClipboard from '../../components/CopyToClipboard';
import { useMediaQuery } from '@mui/material';
import SkeletonLoader from './SkeletonLoader';

function BlockTable() {
const { data: tipData } = useAllBlocks();
const tip = tipData?.tipInfo?.metadata?.best_block_height;
const [blocksPerPage, setBlocksPerPage] = useState(10);
const [page, setPage] = useState(1);
const [firstHeight, setFirstHeight] = useState(tip || 0);
const { data } = useGetBlocksByParam(firstHeight, blocksPerPage);
const { data, isLoading } = useGetBlocksByParam(firstHeight, blocksPerPage);
const [prevDisabled, setPrevDisabled] = useState(true);
const [nextDisabled, setNextDisabled] = useState(false);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));

const motionProps = () => ({
component: motion.div,
initial: { opacity: 0 },
animate: { opacity: 1 },
transition: { delay: 0.05, ease: 'easeOut', duration: 0.5 },
AnimatePresence: true,
});

useEffect(() => {
if (tip && firstHeight === 0) {
setFirstHeight(parseInt(tip));
Expand Down Expand Up @@ -108,8 +119,34 @@ function BlockTable() {
const col1 = 4;
const col2 = 8;

if (isLoading) {
const loaderHeight = 221;
const renderSkeleton = Array.from(
{ length: blocksPerPage },
(_, index) => (
<Fragment key={index}>
<Grid item xs={12}>
<Stack spacing={2}>
<SkeletonLoader height={loaderHeight} />
<SkeletonLoader height={48} />
</Stack>
</Grid>
<Grid item xs={12}>
<Divider color={theme.palette.background.paper} />
</Grid>
</Fragment>
)
);

return (
<Grid container spacing={2} pl={2} pr={2}>
{renderSkeleton}
</Grid>
);
}

return (
<Grid container spacing={2} pl={2} pr={2}>
<Grid container spacing={2} pl={2} pr={2} {...motionProps()}>
{data?.headers.map((block: any, index: number) => (
<Fragment key={index}>
<Grid item xs={col1}>
Expand Down Expand Up @@ -187,41 +224,69 @@ function BlockTable() {
const col5 = 1;
const col6 = 1;

const Header = () => (
<Grid container spacing={2} pl={2} pr={2} pb={2} pt={2}>
<Grid item xs={col1} md={col1} lg={col1}>
<Typography variant="body2">Height</Typography>
</Grid>
<Grid item xs={col2} md={col2} lg={col2}>
<Typography variant="body2">Time</Typography>
</Grid>
<Grid item xs={col3} md={col3} lg={col3}>
<Typography variant="body2">Proof of Work</Typography>
</Grid>
<Grid item xs={col4} md={col4} lg={col4}>
<Typography variant="body2">Hash</Typography>
</Grid>
<Grid
item
xs={col5}
md={col5}
lg={col5}
style={{ textAlign: 'center' }}
>
<Typography variant="body2">Kernels</Typography>
</Grid>
<Grid
item
xs={col6}
md={col6}
lg={col6}
style={{ textAlign: 'center' }}
>
<Typography variant="body2">Outputs</Typography>
</Grid>
</Grid>
);

if (isLoading) {
const loaderHeight = 26;
const renderSkeleton = Array.from(
{ length: blocksPerPage },
(_, index) => (
<Fragment key={index}>
<Grid item xs={12} pl={2} pr={2}>
<Divider color={theme.palette.background.paper} />
</Grid>
<Grid item p={2} xs={12}>
<SkeletonLoader height={loaderHeight} />
</Grid>
</Fragment>
)
);

return (
<>
<Header />
{renderSkeleton}
</>
);
}

return (
<>
<Grid container spacing={2} pl={2} pr={2} pb={2} pt={2}>
<Grid item xs={col1} md={col1} lg={col1}>
<Typography variant="body2">Height</Typography>
</Grid>
<Grid item xs={col2} md={col2} lg={col2}>
<Typography variant="body2">Time</Typography>
</Grid>
<Grid item xs={col3} md={col3} lg={col3}>
<Typography variant="body2">Proof of Work</Typography>
</Grid>
<Grid item xs={col4} md={col4} lg={col4}>
<Typography variant="body2">Hash</Typography>
</Grid>
<Grid
item
xs={col5}
md={col5}
lg={col5}
style={{ textAlign: 'center' }}
>
<Typography variant="body2">Kernels</Typography>
</Grid>
<Grid
item
xs={col6}
md={col6}
lg={col6}
style={{ textAlign: 'center' }}
>
<Typography variant="body2">Outputs</Typography>
</Grid>
</Grid>
<Grid container spacing={2} pl={2} pr={2} pb={2}>
<Header />
<Grid container spacing={2} pl={2} pr={2} pb={2} {...motionProps()}>
{data?.headers.map((block: any, index: number) => (
<Fragment key={index}>
<Grid item xs={12}>
Expand Down
5 changes: 5 additions & 0 deletions src/routes/Blocks/Data/Outputs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,11 @@ export const outputItems = (content: any) => {
value: content.covenant.data,
copy: false,
},
{
label: 'Encrypted Data',
value: toHexString(content.encrypted_data.data),
copy: true,
},
];

return items;
Expand Down
43 changes: 43 additions & 0 deletions src/routes/Blocks/SkeletonLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { motion } from 'framer-motion';
import { Box } from '@mui/material';

interface SkeletonLoaderProps {
height?: number;
}

const SkeletonLoader = ({ height }: SkeletonLoaderProps) => {
return (
<Box
component={motion.div}
sx={{
width: '100%',
height: height ? `${height}px` : '100px',
backgroundColor: 'rgba(0, 0, 0, 0.04)',
borderRadius: '8px',
overflow: 'hidden',
position: 'relative',
}}
initial={{ opacity: 0.5 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, repeat: Infinity, repeatType: 'reverse' }}
>
<Box
component={motion.div}
sx={{
width: '100%',
height: '100%',
background:
'linear-gradient(90deg, rgba(0, 0, 0, 0.01)%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.01) 75%)',
position: 'absolute',
top: 0,
left: 0,
}}
initial={{ x: '-100%' }}
animate={{ x: '100%' }}
transition={{ duration: 1, ease: 'easeInOut', repeat: Infinity }}
/>
</Box>
);
};

export default SkeletonLoader;
0 src/theme/components/Header.tsx → src/routes/Header/Header.tsx
View file
Open in desktop
File renamed without changes.
0 src/theme/components/HeaderTitle.tsx → src/routes/Header/HeaderTitle.tsx
View file
Open in desktop
File renamed without changes.
0 src/theme/components/SearchField.tsx → src/routes/Header/SearchField.tsx
View file
Open in desktop
File renamed without changes.
0 src/theme/components/StatsDialog.tsx → src/routes/Header/StatsDialog.tsx
View file
Open in desktop
File renamed without changes.
0 src/theme/components/StatsItem.css → src/routes/Header/StatsItem.css
View file
Open in desktop
File renamed without changes.
0 src/theme/components/StatsItem.tsx → src/routes/Header/StatsItem.tsx
View file
Open in desktop
File renamed without changes.
0 src/theme/components/TopBar.tsx → src/routes/Header/TopBar.tsx
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions src/theme/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ import CssBaseline from '@mui/material/CssBaseline';
import { Outlet } from 'react-router-dom';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Header from './components/Header';
import TopBar from './components/TopBar';
import Header from '../routes/Header/Header';
import TopBar from '../routes/Header/TopBar';
import { darkTheme } from './themes';

export default function MainLayout() {
Expand Down
6 changes: 3 additions & 3 deletions src/theme/PageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ import CssBaseline from '@mui/material/CssBaseline';
import { Outlet } from 'react-router-dom';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Header from './components/Header';
import TopBar from './components/TopBar';
import Header from '../routes/Header/Header';
import TopBar from '../routes/Header/TopBar';
import { darkTheme, lightTheme } from './themes';

import HeaderTitle from './components/HeaderTitle';
import HeaderTitle from '../routes/Header/HeaderTitle';

interface PageLayoutProps {
title?: string;
Expand Down