@linagora/twake-mui 10.2.0 → 10.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @linagora/twake-mui [10.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.2.0...@linagora/twake-mui@10.3.0) (2026-10-06)
+
+
+### Features
+
+* **twake-mui:** Implement loading state in virtualized table ([7a043cc](https://github.com/linagora/twake-ui/commit/7a043cc94a1e5af4229387088c2cae3214f8bd20))
+
 # @linagora/twake-mui [10.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.1.0...@linagora/twake-mui@10.2.0) (2026-10-06)
 
 

package/dist/components/VirtualizedTable/Cell.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Column, Row, RowContentProps } from './types';
+import { type Column, type Row, type RowContentProps } from './types';
 interface CellProps extends RowContentProps {
     row: Row;
     columns: Column[];

package/dist/components/VirtualizedTable/Cell.js

@@ -1,24 +1,26 @@
-import { TableCell } from '@mui/material';
+import { TableCell, Skeleton } from '@mui/material';
 import React, { useRef } from 'react';
 import { useOnLongPress } from 'rooks';
 import { getPath } from './helpers';
+import { _isLoading as _isLoadingSymbol } from './types';
 const DOUBLE_CLICK_DELAY = 400;
 const LONG_PRESS_DURATION = 300;
 export const Cell = ({ row, columns, column, onClick, onDoubleClick, onLongPress, children }) => {
     // onClick is triggered after a long press anyway, so we need this flag to swallow it
     const isLongPress = useRef(false);
     const lastClickTime = useRef(0);
+    const _isLoading = row[_isLoadingSymbol] === true;
     const cellContent = getPath(row, column.id);
     const cell = cellContent === undefined ? '—' : cellContent;
     const longPressRef = useOnLongPress(() => {
         // without a long press handler, a slow click must stay a click
-        if (column.disableClick || !onLongPress)
+        if (_isLoading || column.disableClick || !onLongPress)
             return;
         isLongPress.current = true;
         onLongPress(row, column);
     }, { duration: LONG_PRESS_DURATION });
     const handleClick = () => {
-        if (column.disableClick)
+        if (_isLoading || column.disableClick)
             return;
         if (isLongPress.current) {
             isLongPress.current = false;
@@ -31,12 +33,18 @@ export const Cell = ({ row, columns, column, onClick, onDoubleClick, onLongPress
             onClick?.(row, column);
     };
     return (React.createElement(TableCell, { ref: longPressRef, sx: {
-            cursor: !!onClick && !column.disableClick ? 'pointer' : undefined,
+            cursor: !!onClick && !_isLoading && !column.disableClick
+                ? 'pointer'
+                : undefined,
             width: column.width,
             maxWidth: column.maxWidth
-        }, className: column.noWrap ? 'u-ellipsis' : undefined, align: column.textAlign ?? 'left', padding: column.disablePadding ? 'none' : 'normal', onClick: handleClick, onDoubleClick: () => column.disableClick ? undefined : onDoubleClick?.(row, column), onContextMenu: ev => isLongPress.current && ev.preventDefault() }, children
-        ? React.Children.map(children, child => React.isValidElement(child)
-            ? React.cloneElement(child, { row, columns, column, cell })
-            : null)
-        : cell));
+        }, className: column.noWrap ? 'u-ellipsis' : undefined, align: column.textAlign ?? 'left', padding: column.disablePadding ? 'none' : 'normal', onClick: handleClick, onDoubleClick: () => _isLoading || column.disableClick
+            ? undefined
+            : onDoubleClick?.(row, column), onContextMenu: ev => isLongPress.current && ev.preventDefault() }, _isLoading
+        ? column.skeleton || React.createElement(Skeleton, { animation: "wave", variant: "text" })
+        : children
+            ? React.Children.map(children, child => React.isValidElement(child)
+                ? React.cloneElement(child, { row, columns, column, cell })
+                : null)
+            : cell));
 };

package/dist/components/VirtualizedTable/FixedHeaderContent.d.ts

@@ -5,6 +5,7 @@ interface FixedHeaderContentProps {
     orderBy?: string;
     orderDirection: OrderDirection;
     onClick: (columnId: string) => void;
+    isLoading?: boolean;
 }
 export declare const FixedHeaderContent: React.FC<FixedHeaderContentProps>;
 export {};

package/dist/components/VirtualizedTable/FixedHeaderContent.js

@@ -1,4 +1,4 @@
 import { TableRow } from '@mui/material';
 import React from 'react';
 import { HeadCell } from './HeadCell';
-export const FixedHeaderContent = ({ columns, orderBy, orderDirection, onClick }) => (React.createElement(TableRow, null, columns.map(column => (React.createElement(HeadCell, { key: column.id, column: column, orderBy: orderBy, orderDirection: orderDirection, onClick: () => onClick(column.id) })))));
+export const FixedHeaderContent = ({ columns, orderBy, orderDirection, onClick, isLoading }) => (React.createElement(TableRow, null, columns.map(column => (React.createElement(HeadCell, { key: column.id, column: column, orderBy: orderBy, orderDirection: orderDirection, onClick: () => onClick(column.id), isLoading: isLoading })))));

package/dist/components/VirtualizedTable/HeadCell.d.ts

@@ -5,6 +5,7 @@ interface HeadCellProps {
     orderBy?: string;
     orderDirection: OrderDirection;
     onClick: () => void;
+    isLoading?: boolean;
 }
 export declare const HeadCell: React.FC<HeadCellProps>;
 export {};

package/dist/components/VirtualizedTable/HeadCell.js

@@ -1,4 +1,4 @@
-import { TableCell, TableSortLabel } from '@mui/material';
+import { TableCell, TableSortLabel, Skeleton } from '@mui/material';
 import React from 'react';
 import { useExtendI18n, useI18n } from 'twake-i18n';
 import de from './locales/de.json';
@@ -9,13 +9,16 @@ import it from './locales/it.json';
 import ru from './locales/ru.json';
 import vi from './locales/vi.json';
 const locales = { de, en, es, fr, it, ru, vi };
-export const HeadCell = ({ column, orderBy, orderDirection, onClick }) => {
+export const HeadCell = ({ column, orderBy, orderDirection, onClick, isLoading }) => {
     useExtendI18n(locales);
     const { t } = useI18n();
     const isActive = orderBy === column.id;
+    const content = isLoading ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "u-visuallyhidden" }, column.label),
+        React.createElement(Skeleton, { animation: "wave", width: 50 }))) : (column.label);
     return (React.createElement(TableCell, { sx: { width: column.width, maxWidth: column.maxWidth }, className: column.noWrap ? 'u-ellipsis' : undefined, align: column.textAlign ?? 'left', padding: column.disablePadding ? 'none' : 'normal', sortDirection: isActive ? orderDirection : false }, column.sortable !== false ? (React.createElement(TableSortLabel, { active: isActive, direction: isActive ? orderDirection : 'asc', onClick: onClick },
-        column.label,
+        content,
         isActive && (React.createElement("span", { className: "u-visuallyhidden" }, orderDirection === 'desc'
             ? t('VirtualizedTable.sortedDesc')
-            : t('VirtualizedTable.sortedAsc'))))) : (column.label)));
+            : t('VirtualizedTable.sortedAsc'))))) : (content)));
 };

package/dist/components/VirtualizedTable/VirtualizedTable.stories.js

@@ -1,4 +1,4 @@
-import { Button, Typography } from '@mui/material';
+import { Button, Skeleton, Typography } from '@mui/material';
 import React, { useState } from 'react';
 import { fn } from 'storybook/test';
 import { VirtualizedTable } from './index';
@@ -26,7 +26,8 @@ const columns = [
         label: 'Calories',
         width: 80,
         textAlign: 'left',
-        sortable: false
+        sortable: false,
+        skeleton: (React.createElement(Skeleton, { animation: "wave", variant: "circular", width: 24, height: 24 }))
     },
     { id: 'fat', label: 'Fat (g)', width: 85, textAlign: 'right' },
     { id: 'carbs', label: 'Carbs (g)', width: 115, textAlign: 'right' },
@@ -46,15 +47,20 @@ const makeGroups = () => ({
 const UNSELECTABLE_ID = 1;
 const onDoubleClick = fn().mockName('onDoubleClick');
 const onLongPress = fn().mockName('onLongPress');
-const ExampleTable = ({ title, ...props }) => {
+const ExampleTable = ({ title, isLoading: propsIsLoading = false, ...props }) => {
     const [selected, setSelected] = useState([]);
+    const [localIsLoading, setLocalIsLoading] = useState(propsIsLoading);
+    React.useEffect(() => {
+        setLocalIsLoading(propsIsLoading);
+    }, [propsIsLoading]);
     const toggle = (id) => setSelected(ids => ids.includes(id) ? ids.filter(i => i !== id) : [...ids, id]);
     const toggleAll = () => setSelected(ids => ids.length ? [] : rows.map(r => r.id).filter(id => id !== 1));
     return (React.createElement(React.Fragment, null,
         React.createElement(Typography, { sx: { mt: 2 }, variant: "h4" }, title),
         React.createElement(Button, { sx: { my: 2 }, variant: "text", onClick: toggleAll }, "Select all"),
+        React.createElement(Button, { sx: { my: 2, ml: 2 }, variant: "text", onClick: () => setLocalIsLoading(!localIsLoading) }, "Toggle loading"),
         React.createElement("div", { style: { border: '1px solid #ccc', height: 400, width: '100%' } },
-            React.createElement(VirtualizedTable, { rows: rows, columns: columns, selectedItems: selected, isSelectedItem: row => selected.includes(row.id), componentsProps: {
+            React.createElement(VirtualizedTable, { rows: rows, columns: columns, isLoading: localIsLoading, selectedItems: selected, isSelectedItem: row => selected.includes(row.id), componentsProps: {
                     rowContent: {
                         onClick: row => row.id !== UNSELECTABLE_ID && toggle(row.id),
                         onDoubleClick: (row, column) => row.id !== UNSELECTABLE_ID && onDoubleClick(row, column),
@@ -71,6 +77,7 @@ const meta = {
         columns: { control: 'object' },
         defaultOrder: { control: 'object' },
         selectedItems: { control: 'object' },
+        isLoading: { control: 'boolean' },
         groups: { control: false },
         secondarySort: { control: false },
         isSelectedItem: { control: false },
@@ -100,5 +107,8 @@ export const Screenshot = {
         React.createElement("section", null,
             React.createElement("h3", null, "Grouped"),
             React.createElement(ExampleTable, { title: "Not sorted table", groups: makeGroups }),
-            React.createElement(ExampleTable, { title: "Sorted table", groups: makeGroups, defaultOrder: { by: 'name', direction: 'asc' } }))))
+            React.createElement(ExampleTable, { title: "Sorted table", groups: makeGroups, defaultOrder: { by: 'name', direction: 'asc' } })),
+        React.createElement("section", null,
+            React.createElement("h3", null, "Loading"),
+            React.createElement(ExampleTable, { title: "Loading state", isLoading: true }))))
 };

package/dist/components/VirtualizedTable/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';
-import type { Column, OrderDirection, Row, RowContentProps, TableContext } from './types';
+import { type Column, type OrderDirection, type Row, type RowContentProps, type TableContext } from './types';
 export type { Column as VirtualizedTableColumn, Row as VirtualizedTableRow } from './types';
 export interface VirtualizedTableProps extends Omit<TableVirtuosoProps<Row, TableContext>, 'data' | 'rows' | 'context' | 'components' | 'itemContent' | 'fixedHeaderContent'> {
     /** Rows to display in the table */
@@ -38,6 +38,10 @@ export interface VirtualizedTableProps extends Omit<TableVirtuosoProps<Row, Tabl
         order: OrderDirection;
         orderBy: string;
     }) => void;
+    /** Is the table loading data */
+    isLoading?: boolean;
+    /** The number of skeletons to show when loading */
+    skeletonCount?: number;
 }
 export declare const VirtualizedTable: React.ForwardRefExoticComponent<VirtualizedTableProps & React.RefAttributes<TableVirtuosoHandle>>;
 export default VirtualizedTable;

package/dist/components/VirtualizedTable/index.js

@@ -4,17 +4,24 @@ import { GroupedTableVirtuoso, TableVirtuoso } from 'react-virtuoso';
 import { FixedHeaderContent } from './FixedHeaderContent';
 import { RowContent } from './RowContent';
 import { getComparator, stableSort } from './helpers';
+import { _isLoading } from './types';
 import { virtuosoComponents } from './virtuosoComponents';
-export const VirtualizedTable = forwardRef(({ rows, columns, groups, defaultOrder, secondarySort, selectedItems = [], isSelectedItem = () => false, isNewItem, context, componentsProps, components = virtuosoComponents, onSortChange, ...props }, ref) => {
+export const VirtualizedTable = forwardRef(({ rows, columns, groups, defaultOrder, secondarySort, selectedItems = [], isSelectedItem = () => false, isNewItem, context, componentsProps, components = virtuosoComponents, onSortChange, isLoading, skeletonCount = 10, ...props }, ref) => {
     const [orderDirection, setOrderDirection] = useState(defaultOrder?.direction ?? 'asc');
     const [orderBy, setOrderBy] = useState(defaultOrder?.by);
     const data = useMemo(() => {
+        if (isLoading) {
+            return Array.from({ length: skeletonCount }).map((_, i) => ({
+                [_isLoading]: true,
+                id: `skeleton-${i}`
+            }));
+        }
         const sortedRows = orderBy
             ? stableSort(rows, getComparator(orderDirection, orderBy))
             : rows;
         return secondarySort ? secondarySort(sortedRows) : sortedRows;
-    }, [rows, orderBy, orderDirection, secondarySort]);
-    const { groupLabels, groupCounts } = groups?.(data) ?? {};
+    }, [rows, orderBy, orderDirection, secondarySort, isLoading, skeletonCount]);
+    const { groupLabels, groupCounts } = (isLoading ? undefined : groups?.(data)) ?? {};
     const tableContext = {
         ...context,
         data,
@@ -33,8 +40,12 @@ export const VirtualizedTable = forwardRef(({ rows, columns, groups, defaultOrde
         ...props,
         context: tableContext,
         components,
-        fixedHeaderContent: () => (React.createElement(FixedHeaderContent, { columns: columns, orderDirection: orderDirection, orderBy: orderBy, onClick: handleSort })),
-        itemContent: (index) => (React.createElement(RowContent, { ...componentsProps?.rowContent, row: data[index], columns: columns }))
+        fixedHeaderContent: () => (React.createElement(FixedHeaderContent, { columns: columns, orderDirection: orderDirection, orderBy: orderBy, onClick: handleSort, isLoading: isLoading })),
+        itemContent: (index, ...args) => {
+            const ctx = args[args.length - 1];
+            const freshData = ctx?.data ?? data;
+            return (React.createElement(RowContent, { ...componentsProps?.rowContent, row: freshData[index], columns: columns }));
+        }
     };
     return groupCounts ? (React.createElement(GroupedTableVirtuoso, { ...shared, 
         // both handles expose the same scroll methods, only the location typing differs

package/dist/components/VirtualizedTable/types.d.ts

@@ -1,7 +1,8 @@
 import type { TableCellProps } from '@mui/material';
 import type React from 'react';
-export type Row = Record<string, unknown>;
+export type Row = Record<string | symbol, unknown>;
 export type OrderDirection = 'asc' | 'desc';
+export declare const _isLoading: unique symbol;
 export interface Column {
     id: string;
     label?: React.ReactNode;
@@ -12,6 +13,7 @@ export interface Column {
     disablePadding?: boolean;
     sortable?: boolean;
     disableClick?: boolean;
+    skeleton?: React.ReactNode;
 }
 export interface TableContext {
     data?: Row[];

package/dist/components/VirtualizedTable/types.js

@@ -1 +1 @@
-export {};
+export const _isLoading = Symbol('_isLoading');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",