diff --git a/frontend/src/app-components/svg/NoDataIcon.tsx b/frontend/src/app-components/svg/NoDataIcon.tsx index ee7752a3..b7918f2e 100644 --- a/frontend/src/app-components/svg/NoDataIcon.tsx +++ b/frontend/src/app-components/svg/NoDataIcon.tsx @@ -1,59 +1,40 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * Copyright © 2025 Hexastack. All rights reserved. * * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ -import React, { FC, SVGProps } from "react"; +import { FC, SVGProps } from "react"; -const NoDataIcon: FC> = ({ ...props }) => { +const NoDataIcon: FC> = ({ width = 96, ...props }) => { return ( - No data - - - - - - - - - - - - - - + + + + ); }; diff --git a/frontend/src/app-components/tables/DataGrid.tsx b/frontend/src/app-components/tables/DataGrid.tsx index e49d1e72..8816ae72 100644 --- a/frontend/src/app-components/tables/DataGrid.tsx +++ b/frontend/src/app-components/tables/DataGrid.tsx @@ -1,5 +1,5 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * Copyright © 2025 Hexastack. All rights reserved. * * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. @@ -73,6 +73,12 @@ export const DataGrid = ({ autoHeight={autoHeight} disableRowSelectionOnClick={disableRowSelectionOnClick} slots={slots} + slotProps={{ + loadingOverlay: { + variant: "linear-progress", + noRowsVariant: "skeleton", + }, + }} showCellVerticalBorder={showCellVerticalBorder} showColumnVerticalBorder={showColumnVerticalBorder} sx={sx} diff --git a/frontend/src/app-components/tables/NoDataOverlay.tsx b/frontend/src/app-components/tables/NoDataOverlay.tsx index 78b15dbc..d4220f18 100644 --- a/frontend/src/app-components/tables/NoDataOverlay.tsx +++ b/frontend/src/app-components/tables/NoDataOverlay.tsx @@ -1,42 +1,46 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * Copyright © 2025 Hexastack. All rights reserved. * * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ -import { Grid, Typography } from "@mui/material"; +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; import { useTranslate } from "@/hooks/useTranslate"; import NoDataIcon from "../svg/NoDataIcon"; +const StyledGridOverlay = styled("div")(({ theme }) => ({ + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + height: "100%", + minHeight: "200px", + "& .no-rows-primary": { + fill: "#3D4751", + ...theme.applyStyles("light", { + fill: "#AEB8C2", + }), + }, + "& .no-rows-secondary": { + fill: "#1D2126", + ...theme.applyStyles("light", { + fill: "#E8EAED", + }), + }, +})); + export const NoDataOverlay = () => { const { t } = useTranslate(); return ( - + - - - {t("label.no_data")} - - - + {t("label.no_data")} + ); }; diff --git a/frontend/src/hooks/crud/useFind.tsx b/frontend/src/hooks/crud/useFind.tsx index 4eae0130..04c25b1a 100644 --- a/frontend/src/hooks/crud/useFind.tsx +++ b/frontend/src/hooks/crud/useFind.tsx @@ -1,5 +1,5 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * Copyright © 2025 Hexastack. All rights reserved. * * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. @@ -86,6 +86,7 @@ export const useFind = < ); } }, + keepPreviousData: true, ...otherOptions, }); const data = (ids || []) @@ -99,7 +100,7 @@ export const useFind = < dataGridProps: { ...dataGridPaginationProps, rows: data || [], - loading: normalizedQuery.isLoading, + loading: normalizedQuery.isLoading || normalizedQuery.isFetching, }, }; }; diff --git a/frontend/src/hooks/crud/useInfiniteFind.ts b/frontend/src/hooks/crud/useInfiniteFind.ts index 4d4cfc9b..dd2888cc 100644 --- a/frontend/src/hooks/crud/useInfiniteFind.ts +++ b/frontend/src/hooks/crud/useInfiniteFind.ts @@ -1,5 +1,5 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * Copyright © 2025 Hexastack. All rights reserved. * * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. @@ -74,6 +74,7 @@ export const useInfiniteFind = < return result; }, + keepPreviousData: true, ...(otherOptions || {}), });