feat(AnalyticalTable): introduce alwaysShowBusyIndicator prop (#7448)

Closes #7402

Author: Lukas742

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

@@ -1539,7 +1539,16 @@ describe('AnalyticalTable', () => {
       'opacity',
       '0.4',
     );
+    cy.mount(<AnalyticalTable data={[]} columns={columns} loading loadingDelay={0} alwaysShowBusyIndicator />);
+    cy.get('[data-component-name="AnalyticalTableLoadingPlaceholder"]').should('not.exist');
+    cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('be.visible');
+    cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class*="busyIndicator"])').should(
+      'have.css',
+      'opacity',
+      '0.4',
+    );
     cy.mount(<AnalyticalTable data={data} columns={columns} loading />);
+    cy.get('[data-component-name="AnalyticalTableLoadingPlaceholder"]').should('not.exist');
     cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('be.visible');
     cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class*="busyIndicator"])').should(
       'have.css',

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

@@ -107,8 +107,9 @@ const measureElement = (el: HTMLElement) => {
  */
 const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTypes>((props, ref) => {
   const {
-    alternateRowColor,
     adjustTableHeightOnPopIn,
+    alternateRowColor,
+    alwaysShowBusyIndicator,
     className,
     columnOrder,
     columns,
@@ -749,7 +750,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           className={classNames.tableContainerWithScrollBar}
           data-component-name="AnalyticalTableContainerWithScrollbar"
         >
-          {loading && !!rows.length && (
+          {loading && (!!rows.length || alwaysShowBusyIndicator) && (
             <BusyIndicator
               className={classNames.busyIndicator}
               active={true}
@@ -816,7 +817,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                 tabIndex={0}
                 className={classNames.noDataContainer}
               >
-                {loading ? (
+                {loading && !alwaysShowBusyIndicator ? (
                   <TablePlaceholder
                     columns={visibleColumns}
                     rows={minRows}

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -707,7 +707,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
   /**
    * Indicates whether a loading indicator should be shown.
    *
-   * __Note:__ If the data array is not empty and loading is set to `true` a `BusyIndicator` will be displayed on top of the table, otherwise a skeleton placeholder will be shown.
+   * __Note:__ If the data array is not empty and loading is set to `true` a `BusyIndicator` will be displayed on top of the table, otherwise a skeleton placeholder will be shown. You can control this behavior via the `alwaysShowBusyIndicator` prop.
    */
   loading?: boolean;
   /**
@@ -720,6 +720,10 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * Setting this prop to `true` will show an overlay on top of the AnalyticalTable content preventing users from interacting with it.
    */
   showOverlay?: boolean;
+  /**
+   * If `true`, always shows the `BusyIndicator` component when loading instead of the skeleton loader.
+   */
+  alwaysShowBusyIndicator?: boolean;
   /**
    * Defines the text shown if the data array is empty or a filtered table doesn't return results.
    *