diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx index 76a1d597..ae119011 100644 --- a/src/components/Table/TableBody.tsx +++ b/src/components/Table/TableBody.tsx @@ -4,11 +4,13 @@ import type { Column, Row } from "@tanstack/react-table"; import StyledRow from "./Styled/StyledRow"; import OutOfOrderIndicator from "./OutOfOrderIndicator"; import CellValidation from "./CellValidation"; +import { RowsSkeleton } from "./TableSkeleton"; import { tableScope, tableSchemaAtom, selectedCellAtom, + tableNextPageAtom, } from "@src/atoms/tableScope"; import { getFieldProp } from "@src/components/fields"; @@ -38,6 +40,7 @@ export default function TableBody({ }: ITableBodyProps) { const [tableSchema] = useAtom(tableSchemaAtom, tableScope); const [selectedCell] = useAtom(selectedCellAtom, tableScope); + const [tableNextPage] = useAtom(tableNextPageAtom, tableScope); const { virtualRows, @@ -117,6 +120,8 @@ export default function TableBody({ ); })} + {tableNextPage.loading && } + {paddingBottom > 0 && (
)} diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx index e264fde7..065770fc 100644 --- a/src/components/Table/TableSkeleton.tsx +++ b/src/components/Table/TableSkeleton.tsx @@ -13,7 +13,7 @@ import { tableSchemaAtom, tableColumnsOrderedAtom, } from "@src/atoms/tableScope"; -import { DEFAULT_ROW_HEIGHT, DEFAULT_COL_WIDTH } from "./Table"; +import { DEFAULT_ROW_HEIGHT, DEFAULT_COL_WIDTH, TABLE_PADDING } from "./Table"; import { COLLECTION_PAGE_SIZE } from "@src/config/db"; import { formatSubTableName } from "@src/utils/table"; @@ -129,17 +129,7 @@ export function RowsSkeleton() { div:first-of-type": { - borderBottomLeftRadius: (theme) => theme.shape.borderRadius, - }, - "&:last-of-type > div:last-of-type": { - borderBottomRightRadius: (theme) => theme.shape.borderRadius, - }, - }} + style={{ padding: `0 ${TABLE_PADDING}px`, marginTop: -1 }} > {columns.map((col, j) => (