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.
*