feat(AnalyticalTable): introduce loadingDelay prop (#6025)

SAP · Jul 6, 2024 · 6d80fd8 · 6d80fd8
1 parent 80d8c0b
commit 6d80fd8
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -1438,7 +1438,9 @@ describe('AnalyticalTable', () => {
     cy.mount(<AnalyticalTable data={[]} columns={columns} loading />);
     cy.get('[data-component-name="AnalyticalTableLoadingPlaceholder"]').should('be.visible');
     cy.mount(<AnalyticalTable data={data} columns={columns} loading />);
-    cy.get('[data-component-name="AnalyticalTableBusyIndicator"]').should('be.visible');
+    cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('be.visible');
+    cy.mount(<AnalyticalTable data={data} columns={columns} loading loadingDelay={50000} />);
+    cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('not.exist');
     cy.mount(<AnalyticalTable data={[]} columns={columns} />);
     cy.findByText('No data').should('be.visible');
     cy.mount(<AnalyticalTable data={data} columns={columns} filterable globalFilterValue="test123" />);

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
@@ -124,7 +124,8 @@ const meta = {
     selectionMode: AnalyticalTableSelectionMode.SingleSelect,
     selectionBehavior: AnalyticalTableSelectionBehavior.Row,
     overscanCountHorizontal: 5,
-    visibleRowCountMode: AnalyticalTableVisibleRowCountMode.Fixed
+    visibleRowCountMode: AnalyticalTableVisibleRowCountMode.Fixed,
+    loadingDelay: 1000
   },
   argTypes: {
     data: { control: { disable: true } },

diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -134,6 +134,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     infiniteScrollThreshold = 20,
     isTreeTable,
     loading,
+    loadingDelay,
     markNavigatedRow,
     minRows = 5,
     noDataText,
@@ -730,7 +731,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           </TitleBar>
         )}
         {extension && <div ref={extensionRef}>{extension}</div>}
-        <BusyIndicator active={loading} data-component-name="AnalyticalTableBusyIndicator">
+        <BusyIndicator active={loading} delay={loadingDelay} data-component-name="AnalyticalTableBusyIndicator">
           <FlexBox
             className={classNames.tableContainerWithScrollBar}
             data-component-name="AnalyticalTableContainerWithScrollbar"

diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -426,6 +426,12 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * __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.
    */
   loading?: boolean;
+  /**
+   * Defines the delay in milliseconds, after which the `BusyIndicator` will be visible on the screen.
+   *
+   * @default 1000
+   */
+  loadingDelay?: number;
   /**
    * Setting this prop to `true` will show an overlay on top of the AnalyticalTable content preventing users from interacting with it.
    */