@adobe-commerce/elsie 1.5.0-alpha3001 → 1.5.0-alpha3002

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.5.0-alpha3001",
+  "version": "1.5.0-alpha3002",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Table/Table.stories.tsx

@@ -96,6 +96,20 @@ const meta: Meta<TableProps> = {
       },
       control: 'object',
     },
+    loading: {
+      description: 'When true, renders skeleton rows instead of actual data. Useful for showing loading state while data is being fetched.',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      control: 'boolean',
+    },
+    skeletonRowCount: {
+      description: 'Number of skeleton rows to render when loading is true. Defaults to 10 rows.',
+      table: {
+        type: { summary: 'number' },
+      },
+      control: 'number',
+    },
   },
 };
 
@@ -618,4 +632,42 @@ export const RowDetails: Story = {
   },
 };
 
+/**
+ * Table in loading state with skeleton rows.
+ * Demonstrates how the table appears while data is being fetched.
+ * Each cell shows a skeleton placeholder that matches the table structure.
+ * 
+ * **Features**:
+ * - Shows skeleton rows instead of actual data when `loading` is true
+ * - Configurable number of skeleton rows via `skeletonRowCount` prop
+ * - Maintains table structure and column headers during loading
+ * - Each cell contains a single-line skeleton component
+ * 
+ * ```tsx
+ * <Table
+ *   loading={true}
+ *   skeletonRowCount={5}
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'status', label: 'Status' }
+ *   ]}
+ *   rowData={[]} // Empty array when loading
+ * />
+ * ```
+ */
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+    skeletonRowCount: 5,
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [], // Empty when loading
+  },
+};
+
 

package/src/components/Table/Table.tsx

@@ -10,7 +10,7 @@
 import { FunctionComponent, VNode, Fragment } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes, VComponent } from '@adobe-commerce/elsie/lib';
-import { Icon, Button } from '@adobe-commerce/elsie/components';
+import { Icon, Button, Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';
 import { useText } from '@adobe-commerce/elsie/i18n';
 
 import '@adobe-commerce/elsie/components/Table/Table.css';
@@ -28,13 +28,15 @@ type RowData = {
   _rowDetails?: VNode | string; // Special property for expandable row content
 };
 
-export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+export interface TableProps extends Omit<HTMLAttributes<HTMLTableElement>, 'loading'> {
   columns: Column[];
   rowData: RowData[];
   mobileLayout?: 'stacked' | 'none';
   caption?: string;
-  onSortChange?: (columnKey: string, direction: Sortable) => void;
   expandedRows?: Set<number>;
+  loading?: boolean;
+  skeletonRowCount?: number;
+  onSortChange?: (columnKey: string, direction: Sortable) => void;
 }
 
 export const Table: FunctionComponent<TableProps> = ({
@@ -44,14 +46,13 @@ export const Table: FunctionComponent<TableProps> = ({
   rowData = [],
   mobileLayout = 'none',
   caption,
-  onSortChange,
   expandedRows = new Set(),
+  loading = false,
+  skeletonRowCount = 10,
+  onSortChange,
   ...props
 }) => {
   const translations = useText({
-    ariaSortNone: 'Dropin.Table.ariaSortNone',
-    ariaSortAscending: 'Dropin.Table.ariaSortAscending',
-    ariaSortDescending: 'Dropin.Table.ariaSortDescending',
     sortedAscending: 'Dropin.Table.sortedAscending',
     sortedDescending: 'Dropin.Table.sortedDescending',
     sortBy: 'Dropin.Table.sortBy',
@@ -73,7 +74,7 @@ export const Table: FunctionComponent<TableProps> = ({
     onSortChange(column.key, nextDirection);
   };
 
-  const getSortButton = (column: Column) => {
+  const renderSortButton = (column: Column) => {
     if (column.sortBy === undefined) return null;
 
     let iconSource: string;
@@ -102,6 +103,74 @@ export const Table: FunctionComponent<TableProps> = ({
     );
   };
 
+  const renderSkeletonRows = () => {
+    return Array.from({ length: skeletonRowCount }, (_, rowIndex) => (
+      <tr key={`skeleton-${rowIndex}`} className="dropin-table__body__row">
+        {columns.map((column) => (
+          <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+            <Skeleton>
+              <SkeletonRow variant="row" size="small" fullWidth />
+            </Skeleton>
+          </td>
+        ))}
+      </tr>
+    ));
+  };
+
+  const renderDataRows = () => {
+    return rowData.map((row, rowIndex) => {
+      const hasDetails = row._rowDetails !== undefined;
+      const isExpanded = expandedRows.has(rowIndex);
+
+      return (
+        <Fragment key={rowIndex}>
+          <tr className="dropin-table__body__row">
+            {columns.map((column) => {
+              const cell = row[column.key];
+
+              if (typeof cell === 'string' || typeof cell === 'number') {
+                return (
+                  <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+                    {cell}
+                  </td>
+                );
+              }
+
+              return (
+                <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+                  <VComponent node={cell!} />
+                </td>
+              );
+            })}
+          </tr>
+          {hasDetails && isExpanded && (
+            <tr
+              key={`${rowIndex}-details`}
+              className="dropin-table__row-details dropin-table__row-details--expanded"
+              id={`row-${rowIndex}-details`}
+            >
+              <td
+                className="dropin-table__row-details__cell"
+                colSpan={columns.length}
+                role="region"
+                aria-labelledby={`row-${rowIndex}-details`}
+              >
+                {typeof row._rowDetails === 'string' ? row._rowDetails : <VComponent node={row._rowDetails!} />}
+              </td>
+            </tr>
+          )}
+        </Fragment>
+      );
+    });
+  };
+
+  const getAriaSort = (column: Column): 'none' | 'ascending' | 'descending' | 'other' | undefined => {
+    if (column.sortBy === true) return 'none';
+    if (column.sortBy === 'asc') return 'ascending';
+    if (column.sortBy === 'desc') return 'descending';
+    return undefined;
+  };
+
   return (
     <div className={classes(['dropin-table', `dropin-table--mobile-layout-${mobileLayout}`, className])}>
       <table {...props} className="dropin-table__table">
@@ -116,63 +185,22 @@ export const Table: FunctionComponent<TableProps> = ({
                   ['dropin-table__header__cell--sorted', column.sortBy === 'asc' || column.sortBy === 'desc'],
                   ['dropin-table__header__cell--sortable', column.sortBy !== undefined]
                 ])}
-                aria-sort={
-                  column.sortBy === 'asc' ? translations.ariaSortAscending :
-                  column.sortBy === 'desc' ? translations.ariaSortDescending :
-                  column.sortBy === true ? translations.ariaSortNone : undefined
-                }
+                aria-sort={getAriaSort(column)}
               >
                 {column.label}
-                {getSortButton(column)}
+                {renderSortButton(column)}
               </th>
             ))}
           </tr>
         </thead>
         <tbody className="dropin-table__body">
-          {rowData.map((row, rowIndex) => {
-            const hasDetails = row._rowDetails !== undefined;
-            const isExpanded = expandedRows.has(rowIndex);
-            
-            return (
-              <Fragment key={rowIndex}>
-                <tr className="dropin-table__body__row">
-                  {columns.map((column) => {
-                    const cell = row[column.key];
-
-                    if (typeof cell === 'string' || typeof cell === 'number') {
-                      return (
-                        <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
-                          {cell}
-                        </td>
-                      );
-                    }
-
-                    return (
-                      <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
-                        <VComponent node={cell!} />
-                      </td>
-                    );
-                  })}
-                </tr>
-                {hasDetails && isExpanded && (
-                  <tr 
-                    key={`${rowIndex}-details`} 
-                    className="dropin-table__row-details dropin-table__row-details--expanded"
-                    id={`row-${rowIndex}-details`}
-                  >
-                    <td 
-                      className="dropin-table__row-details__cell" 
-                      colSpan={columns.length}
-                      role="region"
-                      aria-labelledby={`row-${rowIndex}-details`}
-                    >
-                      {typeof row._rowDetails === 'string' ? row._rowDetails : <VComponent node={row._rowDetails!} />}
-                    </td>
-                  </tr>
-                )}
-              </Fragment>
-            );
-          })}
+          {loading ? (
+            // Render skeleton rows when loading
+            renderSkeletonRows()
+          ) : (
+            // Render actual data when not loading
+            renderDataRows()
+          )}
         </tbody>
       </table>
     </div>

package/src/i18n/en_US.json

@@ -143,9 +143,6 @@
       "picker": "Select a date"
     },
     "Table": {
-      "ariaSortNone": "none",
-      "ariaSortAscending": "ascending",
-      "ariaSortDescending": "descending",
       "sortedAscending": "Sort {label} ascending",
       "sortedDescending": "Sort {label} descending",
       "sortBy": "Sort by {label}"