allow focusing TablePlaceholder

Author: Lukas742

packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.module.css

@@ -7,6 +7,10 @@
   }
 }
 
+.container {
+  background: var(--sapList_Background);
+}
+
 .animation {
   animation-duration: 2s;
   animation-fill-mode: forwards;

packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx

@@ -1,48 +1,52 @@
-import { ThemingParameters, useStylesheet } from '@ui5/webcomponents-react-base';
+import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties, FC } from 'react';
+import type { ColumnType } from '../../types/index.js';
 import { resolveCellAlignment } from '../../util/index.js';
-import { classNames, styleData } from './TablePlaceholder.module.css.js';
+import { classNames, content } from './TablePlaceholder.module.css.js';
 
-const getArrayOfLength = (len) => Array.from(Array(len).keys());
+const getArrayOfLength = (len: number) => Array.from(Array(len).keys());
 
 interface TablePlaceholderPropTypes {
-  columns: any[];
-  rows: number;
   style: CSSProperties;
+  columns: ColumnType[];
+  rows: number;
+  pleaseWaitText: string;
 }
 
 export const TablePlaceholder: FC<TablePlaceholderPropTypes> = (props) => {
-  const { columns, rows = 5, style } = props;
+  const { columns, rows = 5, style, pleaseWaitText } = props;
 
-  useStylesheet(styleData, TablePlaceholder.displayName);
+  useStylesheet(content, TablePlaceholder.displayName);
 
   return (
-    <div
-      style={{
-        backgroundColor: ThemingParameters.sapList_Background,
-        width: '100%',
-        ...style
-      }}
-      data-component-name="AnalyticalTableLoadingPlaceholder"
-    >
-      {getArrayOfLength(rows).map((_, index) => {
-        return (
-          <div className={classNames.row} key={`row-${index}`}>
-            {columns.map((col) => {
-              return (
-                <div
-                  key={`row${index}-${col.id}`}
-                  className={classNames.cellContainer}
-                  style={{ width: col.totalWidth, ...resolveCellAlignment(col) }}
-                >
-                  <div className={clsx(classNames.cell, classNames.animation)} />
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
+    <div role="gridcell">
+      <div
+        style={style}
+        className={classNames.container}
+        title={pleaseWaitText}
+        role="progressbar"
+        aria-valuetext="Busy"
+        data-component-name="AnalyticalTableLoadingPlaceholder"
+      >
+        {getArrayOfLength(rows).map((_, index) => {
+          return (
+            <div className={classNames.row} key={`row-${index}`}>
+              {columns.map((col) => {
+                return (
+                  <div
+                    key={`row${index}-${col.id}`}
+                    className={classNames.cellContainer}
+                    style={{ width: col.totalWidth, ...resolveCellAlignment(col) }}
+                  >
+                    <div className={clsx(classNames.cell, classNames.animation)} />
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };

packages/main/src/components/AnalyticalTable/index.tsx

@@ -43,6 +43,7 @@ import {
   INVALID_TABLE,
   LIST_NO_DATA,
   NO_DATA_FILTERED,
+  PLEASE_WAIT,
   ROW_COLLAPSED,
   ROW_EXPANDED,
   SELECT_ALL,
@@ -797,18 +798,24 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                 )
               );
             })}
-            {loading && rows?.length === 0 && (
-              <TablePlaceholder columns={visibleColumns} rows={minRows} style={noDataStyles} />
-            )}
-            {!loading && rows?.length === 0 && (
+            {rows?.length === 0 && (
               <div
                 style={noDataStyles}
                 data-component-name="AnalyticalTableNoDataContainer"
                 role="row"
                 tabIndex={0}
                 className={classNames.noDataContainer}
               >
-                <NoDataComponent noDataText={noDataTextLocal} className={classNames.noData} />
+                {loading ? (
+                  <TablePlaceholder
+                    columns={visibleColumns}
+                    rows={minRows}
+                    style={noDataStyles}
+                    pleaseWaitText={i18nBundle.getText(PLEASE_WAIT)}
+                  />
+                ) : (
+                  <NoDataComponent noDataText={noDataTextLocal} className={classNames.noData} />
+                )}
               </div>
             )}
             {rows?.length > 0 && tableRef.current && (