Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(AnalyticalTable): introduce loadingDelay prop #6025

Merged
merged 15 commits into from
Jul 6, 2024
Merged

feat(AnalyticalTable): introduce loadingDelay prop #6025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
05976ac
feat: move depreacted `Loader` to `compat` package & replace with `Bu…
Lukas742 Jul 4, 2024
9d4a88d
charts: remove Loader
Lukas742 Jul 4, 2024
927c04d
fix test
Lukas742 Jul 4, 2024
6f1e059
Merge branch 'main' into feat/loader-compat
Lukas742 Jul 5, 2024
add0bef
charts: update BusyIndicator overlay color
Lukas742 Jul 5, 2024
8191595
remove remnants of `LoadingComponent`
Lukas742 Jul 5, 2024
0b691e4
cleanup
Lukas742 Jul 5, 2024
5cdfcb7
adjust imports
Lukas742 Jul 5, 2024
cb6f675
Merge remote-tracking branch 'origin/main' into feat/loader-compat
Lukas742 Jul 5, 2024
1302c76
Update MigrationGuide.mdx
Lukas742 Jul 5, 2024
53eeb2c
feat(AnalyticalTable): introduce `loadingDelay` prop
Lukas742 Jul 5, 2024
6f34513
add jsdoc default annotation
Lukas742 Jul 5, 2024
f4f0a9c
Merge branch 'main' into feat/at-loading-delay
Lukas742 Jul 5, 2024
dc3f34a
revert to React 19
Lukas742 Jul 5, 2024
14b1594
Update AnalyticalTable.stories.tsx
Lukas742 Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />);
Expand Down
3 changes: 2 additions & 1 deletion packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } },
Expand Down
3 changes: 2 additions & 1 deletion packages/main/src/components/AnalyticalTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
infiniteScrollThreshold = 20,
isTreeTable,
loading,
loadingDelay,
markNavigatedRow,
minRows = 5,
noDataText,
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 6 additions & 0 deletions packages/main/src/components/AnalyticalTable/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
Loading