diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx index aade1ce5f9c..740aac0055e 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx @@ -1539,7 +1539,16 @@ describe('AnalyticalTable', () => { 'opacity', '0.4', ); + cy.mount(); + 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(); + 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', diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index a5e730d63e5..818ff33a955 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -107,8 +107,9 @@ const measureElement = (el: HTMLElement) => { */ const AnalyticalTable = forwardRef((props, ref) => { const { - alternateRowColor, adjustTableHeightOnPopIn, + alternateRowColor, + alwaysShowBusyIndicator, className, columnOrder, columns, @@ -749,7 +750,7 @@ const AnalyticalTable = forwardRef - {loading && !!rows.length && ( + {loading && (!!rows.length || alwaysShowBusyIndicator) && ( - {loading ? ( + {loading && !alwaysShowBusyIndicator ? ( { /** * 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 { * 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. *