From 43cf20f316b5fa199feca0275aa91b1b0506136f Mon Sep 17 00:00:00 2001 From: Anderson LT Date: Fri, 13 Oct 2023 23:24:36 -0300 Subject: [PATCH 1/2] show loadings-cards on loading status --- src/components/Task/CardMultiTasks.tsx | 185 ++++++++++++++++--------- 1 file changed, 121 insertions(+), 64 deletions(-) diff --git a/src/components/Task/CardMultiTasks.tsx b/src/components/Task/CardMultiTasks.tsx index 0bb8651..86a6c09 100644 --- a/src/components/Task/CardMultiTasks.tsx +++ b/src/components/Task/CardMultiTasks.tsx @@ -1,31 +1,50 @@ -import { Grid, CardMedia, CardContent, Typography, Card } from '@mui/material' -import { styled } from '@mui/material/styles'; -import SuspenseLoader from 'src/components/SuspenseLoader' -import { TaskFront } from 'src/models/task'; +import { Grid, CardMedia, CardContent, Typography, Card } from "@mui/material"; +import { styled } from "@mui/material/styles"; +import { TaskFront } from "src/models/task"; +const CardAddAction = styled(Card)<{ $loading: boolean }>( + ({ theme, $loading }) => ` + border: ${theme.colors.primary.main} dashed 1px; + height: 100%; + color: ${theme.colors.primary.main}; + transition: ${theme.transitions.create(["all"])}; -const CardAddAction = styled(Card)( - ({ theme }) => ` - border: ${theme.colors.primary.main} dashed 1px; - height: 100%; - color: ${theme.colors.primary.main}; - transition: ${theme.transitions.create(['all'])}; - - .MuiCardActionArea-root { + .MuiCardActionArea-root { height: 100%; justify-content: center; align-items: center; display: flex; - } - - .MuiTouchRipple-root { + } + + .MuiTouchRipple-root { opacity: .2; - } - - &:hover { + } + + &:hover { border-color: ${theme.colors.alpha.black[70]}; cursor: pointer; - } + } + + ${ + $loading && + ` + @keyframes shine { + to { + background-position-x: -200%; + } + } + + .MuiCardMedia-root, .MuiTypography-root { + background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%); + background-size: 200% 100%; + animation: 1s shine linear infinite; + color: transparent; + } + ` + } + + + ` ); @@ -38,55 +57,93 @@ const CardAddAction = styled(Card)( * @param multiTasksData - An array of TaskFront objects representing task data for multiple cards obtained from the Solidity contract function getTask() + Multicall. * @param loading - A boolean indicating whether the data is still loading. * @param page - The current page number. - * @returns Multiple Card NFTs Grid to display + * @returns Multiple Card NFTs Grid to display */ export const CardMultiTasks = ({ multiTasksData, loading, page }) => { + const handleCardSelect = (taskId) => { + window.location.href = "/tasks/details-task/" + taskId; + }; + + loading = true - const handleCardSelect = (taskId) => { - window.location.href = "/tasks/details-task/" + taskId; - }; + /* multiTasksData = [ + { + metadata: "9", + title: "9", + reward: "9", + creatorRole: "9", + }, + { + metadata: "9", + title: "9", + reward: "9", + creatorRole: "9", + }, + ]; */ - return ( - <> - - {loading ? ( - - ) : ( - <> - {multiTasksData && ( - multiTasksData.map((item: TaskFront, index: React.Key) => ( - - handleCardSelect((page - 1) * 20 + Number(index) + 1)}> - - - - - {item.title} - - - {item.reward} MATIC - - - #{item.creatorRole} - - - - - - )) - )} - - )} - - - ) -} + const CardTasks = ({ index, item }: { index: React.Key; item?: any }) => ( + + handleCardSelect((page - 1) * 20 + Number(index) + 1)} + $loading={loading} + > + + + + + {!loading && item?.title} + + + {!loading && `${item?.reward} MATIC`} + + + #{item?.creatorRole} + + + + + + ); -export default CardMultiTasks + return ( + <> + + {loading ? ( + Array.from({ length: 12 }, () => ({})).map( + (index: React.Key) => ( + + ) + ) + ) : ( + <> + {multiTasksData && + multiTasksData.map((item: TaskFront, index: React.Key) => ( + + ))} + + )} + + + ); +}; +export default CardMultiTasks; From 7fcca0a78c0a0fa0d8a4a10e77c72f9f25dd535b Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Sun, 15 Oct 2023 20:09:39 -0300 Subject: [PATCH 2/2] Feat: Adjust grid ml && add multitaskdata.length in loading array --- src/components/Task/CardMultiTasks.tsx | 150 +++++++++++-------------- 1 file changed, 66 insertions(+), 84 deletions(-) diff --git a/src/components/Task/CardMultiTasks.tsx b/src/components/Task/CardMultiTasks.tsx index 86a6c09..16ab870 100644 --- a/src/components/Task/CardMultiTasks.tsx +++ b/src/components/Task/CardMultiTasks.tsx @@ -3,7 +3,7 @@ import { styled } from "@mui/material/styles"; import { TaskFront } from "src/models/task"; const CardAddAction = styled(Card)<{ $loading: boolean }>( - ({ theme, $loading }) => ` + ({ theme, $loading }) => ` border: ${theme.colors.primary.main} dashed 1px; height: 100%; color: ${theme.colors.primary.main}; @@ -25,9 +25,8 @@ const CardAddAction = styled(Card)<{ $loading: boolean }>( cursor: pointer; } - ${ - $loading && - ` + ${$loading && + ` @keyframes shine { to { background-position-x: -200%; @@ -61,89 +60,72 @@ const CardAddAction = styled(Card)<{ $loading: boolean }>( */ export const CardMultiTasks = ({ multiTasksData, loading, page }) => { - const handleCardSelect = (taskId) => { - window.location.href = "/tasks/details-task/" + taskId; - }; + const handleCardSelect = (taskId) => { + window.location.href = "/tasks/details-task/" + taskId; + }; - loading = true - - /* multiTasksData = [ - { - metadata: "9", - title: "9", - reward: "9", - creatorRole: "9", - }, - { - metadata: "9", - title: "9", - reward: "9", - creatorRole: "9", - }, - ]; */ - - const CardTasks = ({ index, item }: { index: React.Key; item?: any }) => ( - - handleCardSelect((page - 1) * 20 + Number(index) + 1)} - $loading={loading} - > - - - - - {!loading && item?.title} - - - {!loading && `${item?.reward} MATIC`} - - ( + + handleCardSelect((page - 1) * 20 + Number(index) + 1)} + $loading={loading} > - #{item?.creatorRole} - - - - - - ); + + + + + {!loading && item?.title} + + + {!loading && `${item?.reward} MATIC`} + + + #{item?.creatorRole} + + + + + + ); - return ( - <> - - {loading ? ( - Array.from({ length: 12 }, () => ({})).map( - (index: React.Key) => ( - - ) - ) - ) : ( - <> - {multiTasksData && - multiTasksData.map((item: TaskFront, index: React.Key) => ( - - ))} - - )} - - - ); + return ( + <> + + {loading ? ( + Array.from({ length: (multiTasksData.length || 12) }, () => ({})).map( + (index: React.Key) => ( + + ) + ) + ) : ( + <> + {multiTasksData && + multiTasksData.map((item: TaskFront, index: React.Key) => ( + + ))} + + )} + + + ); }; export default CardMultiTasks;