@ui5/webcomponents-react/dist/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.js

React Wrapper for UI5 Web Components and additional components

import { useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { resolveCellAlignment } from '../../util/index.js';
import { classNames, content } from './TablePlaceholder.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
const getArrayOfLength = len => Array.from(Array(len).keys());
export const TablePlaceholder = props => {
  const {
    columns,
    rows = 5,
    style,
    pleaseWaitText
  } = props;
  useStylesheet(content, TablePlaceholder.displayName);
  return /*#__PURE__*/_jsx("div", {
    role: "gridcell",
    children: /*#__PURE__*/_jsx("div", {
      style: style,
      className: classNames.container,
      title: pleaseWaitText,
      role: "progressbar",
      "aria-valuetext": "Busy",
      "data-component-name": "AnalyticalTableLoadingPlaceholder",
      children: getArrayOfLength(rows).map((_, index) => {
        return /*#__PURE__*/_jsx("div", {
          className: classNames.row,
          children: columns.map(col => {
            return /*#__PURE__*/_jsx("div", {
              className: classNames.cellContainer,
              style: {
                width: col.totalWidth,
                ...resolveCellAlignment(col)
              },
              children: /*#__PURE__*/_jsx("div", {
                className: clsx(classNames.cell, classNames.animation)
              })
            }, `row${index}-${col.id}`);
          })
        }, `row-${index}`);
      })
    })
  });
};
TablePlaceholder.displayName = 'TablePlaceholder';