@indico-data/design-system 2.51.0 → 2.51.1

package/lib/components/tanstackTable/TankstackTable.types.d.ts

@@ -2,7 +2,7 @@ import { Row, ColumnDef } from '@tanstack/react-table';
 export type WithPaginationProps = {
     rowsPerPage: number;
     rowCount: number;
-    onChangePage: (page: number, perPage: number) => void;
+    onChangePage: (page: number) => void;
     currentPage: number;
     totalEntriesText?: string;
     showPagination: true;
@@ -10,7 +10,7 @@ export type WithPaginationProps = {
 export type WithoutPaginationProps = {
     rowsPerPage?: number;
     rowCount?: number;
-    onChangePage?: (page: number, perPage: number) => void;
+    onChangePage?: (page: number) => void;
     currentPage?: number;
     totalEntriesText?: string;
     showPagination?: false;
@@ -37,4 +37,9 @@ export type Props<T extends object> = {
     isLoading?: boolean;
     defaultPinnedColumns?: string[];
     onClickRow?: ((row: Row<T>) => void) | null;
+    onRowClick?: (row: T) => void;
+    activeRows?: string[];
+    rowSelection?: Record<string, boolean>;
+    onRowSelectionChange?: (updater: Record<string, boolean>) => void;
+    onSelectAllChange?: (isSelected: boolean) => void;
 } & PaginationProps;

package/lib/components/tanstackTable/TanstackTable.stories.d.ts

@@ -13,3 +13,4 @@ export declare const NoResultsWithFilters: Story;
 export declare const IsLoading: Story;
 export declare const IsLoadingWithData: Story;
 export declare const WithPagination: Story;
+export declare const WithRowSelection: Story;

package/lib/components/tanstackTable/TanstakTable.d.ts

@@ -1,4 +1,4 @@
 import { Props } from './TankstackTable.types';
-export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onClickRow, actionBarClassName, }: Props<T & {
+export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, actionBarClassName, ...rest }: Props<T & {
     id: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/components/tanstackTable/components/TableBody/TableBody.d.ts

@@ -1,12 +1,11 @@
 import { Table } from '@tanstack/react-table';
-import { Row } from '@tanstack/react-table';
-import { Dispatch, SetStateAction } from 'react';
 export type Props<T> = {
     table: Table<T>;
-    onClickRow?: ((row: Row<T>) => void) | null;
+    onRowClick?: ((row: T & {
+        id: string;
+    }) => void) | null | undefined;
     isLoading: boolean;
     columnsLength: number;
-    isClickedRow: string[];
-    setIsClickedRow: Dispatch<SetStateAction<string[]>>;
+    activeRows: string[];
 };
-export declare const TableBody: <T>({ table, onClickRow, isLoading, columnsLength, isClickedRow, setIsClickedRow, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableBody: <T>({ table, onRowClick, isLoading, columnsLength, activeRows, }: Props<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tanstackTable/components/TablePagination/TablePagination.d.ts

@@ -1,7 +1,7 @@
 interface TablePaginationProps {
     rowsPerPage: number;
     rowCount: number;
-    onChangePage: (page: number, perPage: number) => void;
+    onChangePage: (page: number) => void;
     currentPage: number;
     totalEntriesText?: string;
 }

package/lib/components/tanstackTable/useTanstackTable.d.ts

@@ -10,7 +10,5 @@ export declare function useTanstackTable<T>({ defaultColumns }: Props<T>): {
     windowWidth: number;
     formattedColumns: ColumnDef<T>[];
     setFormattedColumns: import("react").Dispatch<import("react").SetStateAction<ColumnDef<T>[]>>;
-    isClickedRow: string[];
-    setIsClickedRow: import("react").Dispatch<import("react").SetStateAction<string[]>>;
 };
 export {};

package/lib/index.css

@@ -2018,6 +2018,7 @@ form {
   left: 50%;
   transform: translateX(-50%);
   z-index: 90;
+  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
 }
 .tanstack-table__action-bar__container {
   display: flex;
@@ -2061,17 +2062,26 @@ form {
   text-decoration: underline;
 }
 
-.tanstack-table__outer-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+.tanstack-table__outer-container .tanstack-table__column--is-pinned {
+  opacity: 1;
+}
+.tanstack-table__outer-container .tanstack-table__column--is-not-pinned {
+  opacity: 0.3;
 }
 .tanstack-table__outer-container .tanstack-table__container {
-  position: relative;
-  display: block;
-  overflow: auto;
-  height: 100%;
+  height: calc(100vh - 70px);
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 1fr;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 1fr;
+  overflow-x: auto;
+  overflow-y: auto;
+  background-color: var(--pf-tanstack-table-background-color);
+  border-radius: var(--pf-rounded-lg);
+  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
   scrollbar-width: thin;
   scrollbar-color: var(--pf-tanstack-table-border-color) var(--pf-tanstack-table-background-color);
 }
@@ -2110,15 +2120,15 @@ form {
 .tanstack-table__thead {
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 3;
   box-sizing: border-box;
   background-color: var(--pf-tanstack-table-background-color);
 }
 .tanstack-table__thead tr:first-child th:first-child {
-  border-top-left-radius: var(--pf-rounded-lg);
+  border-left: none;
 }
 .tanstack-table__thead tr:first-child th:last-child {
-  border-top-right-radius: var(--pf-rounded-lg);
+  border-right: none;
 }
 .tanstack-table__thead__th {
   color: var(--pf-tanstack-table-font-color);
@@ -2141,17 +2151,19 @@ form {
   text-align: left;
 }
 .tanstack-table__thead__th:first-child {
-  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-left: none;
 }
-.tanstack-table__tbody tr:last-child td:first-child {
-  border-bottom-left-radius: var(--pf-rounded-lg);
+.tanstack-table__thead__th:last-child {
+  border-right: none;
 }
-.tanstack-table__tbody tr:last-child td:last-child {
-  border-bottom-right-radius: var(--pf-rounded-lg);
+.tanstack-table__tbody tr:last-child {
+  border-bottom: none;
 }
 .tanstack-table__tbody__tr {
   background: transparent;
   width: 100%;
+  border-left: none;
+  border-right: none;
 }
 .tanstack-table__tbody__tr.is-selected td {
   background: var(--pf-tanstack-table-checked-color);
@@ -2180,7 +2192,10 @@ form {
   text-align: left;
 }
 .tanstack-table__tbody__td:first-child {
-  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-left: none;
+}
+.tanstack-table__tbody__td:last-child {
+  border-right: none;
 }
 .tanstack-table__centered-row {
   padding: var(--pf-padding-1) var(--pf-padding-2);

package/lib/index.d.ts

@@ -553,7 +553,7 @@ declare const Modal: ({ className, children, isOpen, onRequestClose, portalClass
 type WithPaginationProps = {
     rowsPerPage: number;
     rowCount: number;
-    onChangePage: (page: number, perPage: number) => void;
+    onChangePage: (page: number) => void;
     currentPage: number;
     totalEntriesText?: string;
     showPagination: true;
@@ -561,7 +561,7 @@ type WithPaginationProps = {
 type WithoutPaginationProps = {
     rowsPerPage?: number;
     rowCount?: number;
-    onChangePage?: (page: number, perPage: number) => void;
+    onChangePage?: (page: number) => void;
     currentPage?: number;
     totalEntriesText?: string;
     showPagination?: false;
@@ -588,9 +588,14 @@ type Props<T extends object> = {
     isLoading?: boolean;
     defaultPinnedColumns?: string[];
     onClickRow?: ((row: Row$1<T>) => void) | null;
+    onRowClick?: (row: T) => void;
+    activeRows?: string[];
+    rowSelection?: Record<string, boolean>;
+    onRowSelectionChange?: (updater: Record<string, boolean>) => void;
+    onSelectAllChange?: (isSelected: boolean) => void;
 } & PaginationProps;
 
-declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onClickRow, actionBarClassName, }: Props<T & {
+declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, actionBarClassName, ...rest }: Props<T & {
     id: string;
 }>): react_jsx_runtime.JSX.Element;
 

package/lib/index.esm.css

@@ -2018,6 +2018,7 @@ form {
   left: 50%;
   transform: translateX(-50%);
   z-index: 90;
+  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
 }
 .tanstack-table__action-bar__container {
   display: flex;
@@ -2061,17 +2062,26 @@ form {
   text-decoration: underline;
 }
 
-.tanstack-table__outer-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+.tanstack-table__outer-container .tanstack-table__column--is-pinned {
+  opacity: 1;
+}
+.tanstack-table__outer-container .tanstack-table__column--is-not-pinned {
+  opacity: 0.3;
 }
 .tanstack-table__outer-container .tanstack-table__container {
-  position: relative;
-  display: block;
-  overflow: auto;
-  height: 100%;
+  height: calc(100vh - 70px);
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 1fr;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 1fr;
+  overflow-x: auto;
+  overflow-y: auto;
+  background-color: var(--pf-tanstack-table-background-color);
+  border-radius: var(--pf-rounded-lg);
+  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
   scrollbar-width: thin;
   scrollbar-color: var(--pf-tanstack-table-border-color) var(--pf-tanstack-table-background-color);
 }
@@ -2110,15 +2120,15 @@ form {
 .tanstack-table__thead {
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 3;
   box-sizing: border-box;
   background-color: var(--pf-tanstack-table-background-color);
 }
 .tanstack-table__thead tr:first-child th:first-child {
-  border-top-left-radius: var(--pf-rounded-lg);
+  border-left: none;
 }
 .tanstack-table__thead tr:first-child th:last-child {
-  border-top-right-radius: var(--pf-rounded-lg);
+  border-right: none;
 }
 .tanstack-table__thead__th {
   color: var(--pf-tanstack-table-font-color);
@@ -2141,17 +2151,19 @@ form {
   text-align: left;
 }
 .tanstack-table__thead__th:first-child {
-  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-left: none;
 }
-.tanstack-table__tbody tr:last-child td:first-child {
-  border-bottom-left-radius: var(--pf-rounded-lg);
+.tanstack-table__thead__th:last-child {
+  border-right: none;
 }
-.tanstack-table__tbody tr:last-child td:last-child {
-  border-bottom-right-radius: var(--pf-rounded-lg);
+.tanstack-table__tbody tr:last-child {
+  border-bottom: none;
 }
 .tanstack-table__tbody__tr {
   background: transparent;
   width: 100%;
+  border-left: none;
+  border-right: none;
 }
 .tanstack-table__tbody__tr.is-selected td {
   background: var(--pf-tanstack-table-checked-color);
@@ -2180,7 +2192,10 @@ form {
   text-align: left;
 }
 .tanstack-table__tbody__td:first-child {
-  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-left: none;
+}
+.tanstack-table__tbody__td:last-child {
+  border-right: none;
 }
 .tanstack-table__centered-row {
   padding: var(--pf-padding-1) var(--pf-padding-2);

package/lib/index.esm.js

@@ -25644,12 +25644,7 @@ function ActionBar({ table, TableActions, className, children, }) {
             row.toggleSelected(false);
         });
     };
-    const getSelectedItemsText = () => {
-        if (selectedItems.length === 1)
-            return '1 item selected';
-        return `${selectedItems.length} items selected`;
-    };
-    return (jsx(Card, { className: classNames('tanstack-table__action-bar', className), children: children !== null && children !== void 0 ? children : (jsxs("div", { className: "tanstack-table__action-bar__container", children: [jsx("div", { className: "tanstack-table__action-bar__text-container", children: jsx("span", { children: getSelectedItemsText() }) }), TableActions && (jsx("div", { className: "tanstack-table__action-bar__button-container", children: jsx(TableActions, { selectedItems: selectedItems, unselectRows: unselectRows }) }))] })) }));
+    return (jsx(Card, { className: classNames('tanstack-table__action-bar', className), children: children !== null && children !== void 0 ? children : (jsx("div", { className: "tanstack-table__action-bar__container", children: TableActions && (jsx("div", { className: "tanstack-table__action-bar__button-container", children: jsx(TableActions, { selectedItems: selectedItems, unselectRows: unselectRows }) })) })) }));
 }
 
 function NoResults({ clearFilters, hasFilters, message }) {
@@ -42862,7 +42857,7 @@ var lodashExports = lodash.exports;
 
 const TablePagination = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }) => {
     const totalPages = Math.ceil(rowCount / rowsPerPage);
-    return (jsx("div", { className: "table__pagination", "data-testid": "tanstack-table-pagination", children: jsxs(Row, { align: "center", justify: "between", children: [jsx(Col, { xs: "content", children: totalEntriesText && (jsx("span", { "data-testid": "table-pagination-total-entries", className: "table__pagination-total-entries", children: totalEntriesText })) }), jsx(Col, { xs: "content", children: jsx(Pagination, { "data-testid": "table-pagination-component", totalPages: totalPages, currentPage: currentPage, onChange: (page) => onChangePage(page, rowsPerPage) }) })] }) }));
+    return (jsx("div", { className: "table__pagination", "data-testid": "tanstack-table-pagination", children: jsxs(Row, { align: "center", justify: "between", children: [jsx(Col, { xs: "content", children: totalEntriesText && (jsx("span", { "data-testid": "table-pagination-total-entries", className: "table__pagination-total-entries", children: totalEntriesText })) }), jsx(Col, { xs: "content", children: jsx(Pagination, { "data-testid": "table-pagination-component", totalPages: totalPages, currentPage: currentPage, onChange: (page) => onChangePage(page) }) })] }) }));
 };
 
 function useTanstackTable({ defaultColumns }) {
@@ -42871,7 +42866,6 @@ function useTanstackTable({ defaultColumns }) {
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
     const [rowSelection, setRowSelection] = useState({});
     const [formattedColumns, setFormattedColumns] = useState(columns);
-    const [isClickedRow, setIsClickedRow] = useState([]);
     // Tracks changes to browser width to allow for updating of column widths
     useEffect(() => {
         const handleResize = () => {
@@ -42890,8 +42884,6 @@ function useTanstackTable({ defaultColumns }) {
         windowWidth,
         formattedColumns,
         setFormattedColumns,
-        isClickedRow,
-        setIsClickedRow,
     };
 }
 
@@ -42902,7 +42894,7 @@ const getCommonPinningStyles = (column) => {
     return {
         boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : undefined,
         left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
-        position: isPinned ? 'sticky' : 'relative',
+        position: isPinned ? 'sticky' : 'initial',
         zIndex: isPinned ? 1 : 0,
     };
 };
@@ -42946,37 +42938,32 @@ const TableHeader = forwardRef(({ table }, ref) => {
             }) }, headerGroup.id))) }));
 });
 
-const TableBody = ({ table, onClickRow, isLoading, columnsLength, isClickedRow, setIsClickedRow, }) => {
-    const toggleRow = (id) => {
-        if (isClickedRow.includes(id)) {
-            setIsClickedRow((state) => state.filter((item) => item !== id));
-        }
-        else {
-            setIsClickedRow((state) => [...state, id]);
-        }
-    };
+const TableBody = ({ table, onRowClick, isLoading, columnsLength, activeRows, }) => {
     return (jsxs(Fragment, { children: [table.getRowModel().rows.map((row) => (jsx("tr", { className: classNames('tanstack-table__tbody__tr', {
                     'is-selected': row.getIsSelected(),
-                    'show-hover': !!onClickRow,
-                    'is-clicked': isClickedRow.includes(row.id),
-                }), onClick: () => {
-                    if (!!onClickRow) {
-                        toggleRow(row.id);
-                        onClickRow(row);
-                    }
-                }, children: row.getVisibleCells().map((cell) => {
+                    'show-hover': !!onRowClick,
+                    'is-clicked': activeRows.includes(row.id), // Checkbox Is clicked
+                }), children: row.getVisibleCells().map((cell) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h;
                     const { columnDef } = cell.column;
                     return (jsx("td", { className: classNames('tanstack-table__tbody__td', {
                             'pa-0': !!((_c = (_b = (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.cell) === null || _c === void 0 ? void 0 : _c.hasNoPadding),
-                        }), style: Object.assign({}, getTdStyles(cell.column, (_f = (_e = (_d = columnDef.meta) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.cell) === null || _f === void 0 ? void 0 : _f.textAlign, (_h = (_g = columnDef.meta) === null || _g === void 0 ? void 0 : _g.styles) === null || _h === void 0 ? void 0 : _h.definedColumnSize, cell.column.getSize())), children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+                        }), style: Object.assign({}, getTdStyles(cell.column, (_f = (_e = (_d = columnDef.meta) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.cell) === null || _f === void 0 ? void 0 : _f.textAlign, (_h = (_g = columnDef.meta) === null || _g === void 0 ? void 0 : _g.styles) === null || _h === void 0 ? void 0 : _h.definedColumnSize, cell.column.getSize())), onClick: () => {
+                            var _a, _b, _c;
+                            // if the cell is not preventRowSelection, then we can click the row
+                            if (!((_c = (_b = (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.cell) === null || _c === void 0 ? void 0 : _c.preventRowSelection)) {
+                                onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+                            }
+                        }, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
                 }) }, row.id))), isLoading && (jsx("tr", { className: "tanstack-table__tbody__tr", children: jsx("td", { className: classNames('tanstack-table__centered-row', {
                         'is-Loading': isLoading,
                     }), colSpan: columnsLength, children: jsx(CirclePulse, { "data-testid": "loading-indicator" }) }) }))] }));
 };
 
-function TanstackTable({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onClickRow = null, actionBarClassName, }) {
-    const { columns, defaultData, windowWidth, rowSelection, setRowSelection, formattedColumns, setFormattedColumns, isClickedRow, setIsClickedRow, } = useTanstackTable({
+function TanstackTable(_a) {
+    var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onRowClick, activeRows = [], actionBarClassName } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "defaultPinnedColumns", "onRowClick", "activeRows", "actionBarClassName"]);
+    const { columns, defaultData, windowWidth, rowSelection, // This refers to the checkboxes.
+    setRowSelection, formattedColumns, setFormattedColumns, } = useTanstackTable({
         defaultColumns,
     });
     const thRefs = useRef({});
@@ -42989,23 +42976,13 @@ function TanstackTable({ columns: defaultColumns, data, className, currentPage,
         });
         setFormattedColumns(updatedColumns);
     }, [data, columns, windowWidth]);
-    const table = useReactTable({
-        data: data !== null && data !== void 0 ? data : defaultData,
-        columns: formattedColumns,
-        state: {
+    const table = useReactTable(Object.assign(Object.assign({}, rest), { data: data !== null && data !== void 0 ? data : defaultData, columns: formattedColumns, state: {
             rowSelection,
-        },
-        enableRowSelection,
-        onRowSelectionChange: setRowSelection,
-        getCoreRowModel: getCoreRowModel(),
-        manualPagination: true,
-        debugTable: true,
-        initialState: {
+        }, enableRowSelection, onRowSelectionChange: setRowSelection, getCoreRowModel: getCoreRowModel(), manualPagination: true, getRowId: (row) => row === null || row === void 0 ? void 0 : row.id, initialState: {
             columnPinning: {
                 left: defaultPinnedColumns,
             },
-        },
-    });
+        } }));
     const totalRowsOnPage = table.getRowModel().rows.length;
     const hasPaginationProps = !lodashExports.isNil(currentPage) &&
         !lodashExports.isNil(rowCount) &&
@@ -43022,7 +42999,7 @@ function TanstackTable({ columns: defaultColumns, data, className, currentPage,
                             ? (_a = error === null || error === void 0 ? void 0 : error.errorMessage) !== null && _a !== void 0 ? _a : 'There was an error isLoading the data.'
                             : 'No results found.' }) }) }));
         }
-        return (jsx(TableBody, { table: table, onClickRow: onClickRow, isLoading: isLoading, columnsLength: columns.length, isClickedRow: isClickedRow, setIsClickedRow: setIsClickedRow }));
+        return (jsx(TableBody, { table: table, onRowClick: onRowClick, isLoading: isLoading, columnsLength: columns.length, activeRows: activeRows }));
     };
     return (jsxs("div", { className: "tanstack-table__outer-container", children: [jsxs("div", { className: "tanstack-table__container", children: [jsxs("table", { className: classNames('tanstack-table', className, {
                             'is-Loading': isLoading,