QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-12: skeleton when table loading

Browse Source
This commit is contained in:
Tim Chamberlain
2022-10-03 14:39:32 -05:00
parent 8bea9110c7
commit 017111d183
1 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/qqq/pages/dashboards/Widgets/TableCard.tsx
View File

@ -19,7 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import {Icon} from "@mui/material"; import {Icon, Skeleton} from "@mui/material";
import Card from "@mui/material/Card"; import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import Menu from "@mui/material/Menu"; import Menu from "@mui/material/Menu";
@ -152,7 +152,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
</Grid> </Grid>
<MDBox py={1}> <MDBox py={1}>
{ {
data && data.rows ? ( data && data.rows && data.rows.length > 0 ? (
<DataTable <DataTable
table={data} table={data}
entriesPerPage={false} entriesPerPage={false}
@ -160,8 +160,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
isSorted={false} isSorted={false}
noEndBorder noEndBorder
/> />
) ) : data && data.rows && data.rows.length == 0 ? (
:
<MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}> <MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
<MDTypography <MDTypography
variant="subtitle2" variant="subtitle2"
@ -175,6 +174,19 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
} }
</MDTypography> </MDTypography>
</MDBox> </MDBox>
) : (
<MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
<MDTypography
variant="subtitle2"
color="secondary"
fontWeight="regular"
>
<Skeleton />
<Skeleton />
<Skeleton />
</MDTypography>
</MDBox>
)
} }
</MDBox> </MDBox>
</Card> </Card>