Skip to content

Commit 4fb6008

Browse files
Lukas742Lukas742
authored
fix(AnalyticalTable): ensure loading indicator displays correctly across all browsers (#6244)
Fixes #6243
1 parent 7626d0d commit 4fb6008

File tree

2 files changed

+146
-147
lines changed

2 files changed

+146
-147
lines changed

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,17 @@
4141
position: relative;
4242
}
4343

44+
.busyIndicator {
45+
position: absolute;
46+
z-index: 1;
47+
inset: 0;
48+
height: 100%;
49+
}
50+
4451
.overlay {
4552
position: absolute;
4653
z-index: 1;
47-
top: 0;
48-
bottom: 0;
49-
left: 0;
50-
right: 0;
54+
inset: 0;
5155
background: var(--sapGroup_ContentBackground);
5256
opacity: 0.8;
5357

@@ -158,7 +162,7 @@
158162
color: var(--sapList_TextColor);
159163
border-block-end: 1px solid var(--sapList_BorderColor);
160164
/* needed for vertical virtualization*/
161-
margin-bottom: -1px;
165+
margin-block-end: -1px;
162166
box-sizing: border-box;
163167
display: flex;
164168

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

Lines changed: 137 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ import {
4646
SELECT_PRESS_SPACE,
4747
UNSELECT_PRESS_SPACE
4848
} from '../../i18n/i18n-defaults.js';
49-
import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
5049
import { BusyIndicator } from '../../webComponents/BusyIndicator/index.js';
5150
import { Text } from '../../webComponents/Text/index.js';
5251
import { FlexBox } from '../FlexBox/index.js';
@@ -95,19 +94,6 @@ const measureElement = (el: HTMLElement) => {
9594
return el.offsetHeight;
9695
};
9796

98-
//todo: add feature request for parts or even a fix if this turns out to be a bug
99-
addCustomCSSWithScoping(
100-
'ui5-busy-indicator',
101-
`
102-
:host([data-component-name="AnalyticalTableBusyIndicator"]) .ui5-busy-indicator-root {
103-
display: initial;
104-
}
105-
:host([data-component-name="AnalyticalTableBusyIndicator"]) .ui5-busy-indicator-busy-area:focus {
106-
border-radius: 0;
107-
}
108-
`
109-
);
110-
11197
/**
11298
* The `AnalyticalTable` provides a set of convenient functions for responsive table design, including virtualization of rows and columns, infinite scrolling and customizable columns that will, unless otherwise defined, distribute the available space equally among themselves.
11399
* It also provides several possibilities for working with the data, including sorting, filtering, grouping and aggregation.
@@ -717,143 +703,152 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
717703
</TitleBar>
718704
)}
719705
{extension && <div ref={extensionRef}>{extension}</div>}
720-
<BusyIndicator active={loading} delay={loadingDelay} data-component-name="AnalyticalTableBusyIndicator">
721-
<FlexBox
722-
className={classNames.tableContainerWithScrollBar}
723-
data-component-name="AnalyticalTableContainerWithScrollbar"
724-
>
725-
{showOverlay && (
726-
<>
727-
<span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden>
728-
{invalidTableA11yText}
729-
</span>
730-
<div
731-
tabIndex={0}
732-
aria-labelledby={`${titleBarId} ${invalidTableTextId}`}
733-
role="region"
734-
data-component-name="AnalyticalTableOverlay"
735-
className={classNames.overlay}
736-
/>
737-
</>
738-
)}
739-
<div
740-
aria-labelledby={titleBarId}
741-
{...getTableProps()}
742-
tabIndex={showOverlay ? -1 : 0}
743-
role="grid"
744-
aria-rowcount={rows.length}
745-
aria-colcount={visibleColumns.length}
746-
data-per-page={internalVisibleRowCount}
747-
data-component-name="AnalyticalTableContainer"
748-
ref={tableRef}
749-
className={tableClasses}
706+
<FlexBox
707+
className={classNames.tableContainerWithScrollBar}
708+
data-component-name="AnalyticalTableContainerWithScrollbar"
709+
>
710+
{loading && (
711+
<BusyIndicator
712+
className={classNames.busyIndicator}
713+
active={true}
714+
delay={loadingDelay}
715+
data-component-name="AnalyticalTableBusyIndicator"
750716
>
751-
<div className={classNames.tableHeaderBackgroundElement} />
752-
<div className={classNames.tableBodyBackgroundElement} />
753-
{headerGroups.map((headerGroup) => {
754-
let headerProps: Record<string, unknown> = {};
755-
if (headerGroup.getHeaderGroupProps) {
756-
headerProps = headerGroup.getHeaderGroupProps();
757-
}
758-
return (
759-
tableRef.current && (
760-
<ColumnHeaderContainer
761-
ref={headerRef}
762-
key={headerProps.key as string}
763-
resizeInfo={tableState.columnResizing}
764-
headerProps={headerProps}
765-
headerGroup={headerGroup}
766-
onSort={onSort}
767-
onGroupByChanged={onGroupByChanged}
768-
isRtl={isRtl}
769-
columnVirtualizer={columnVirtualizer}
770-
uniqueId={uniqueId}
771-
showVerticalEndBorder={showVerticalEndBorder}
772-
/>
773-
)
774-
);
775-
})}
776-
{loading && rows?.length === 0 && (
777-
<TablePlaceholder columns={visibleColumns} rows={minRows} style={noDataStyles} />
778-
)}
779-
{!loading && rows?.length === 0 && (
780-
<NoDataComponent
781-
noDataText={noDataTextLocal}
782-
className={classNames.noDataContainer}
783-
style={noDataStyles}
784-
/>
785-
)}
786-
{rows?.length > 0 && tableRef.current && (
787-
<VirtualTableBodyContainer
788-
rowCollapsedFlag={tableState.rowCollapsed}
789-
dispatch={dispatch}
790-
tableBodyHeight={tableBodyHeight}
791-
totalColumnsWidth={columnVirtualizer.getTotalSize()}
792-
parentRef={parentRef}
793-
classes={classNames}
794-
infiniteScroll={infiniteScroll}
795-
infiniteScrollThreshold={infiniteScrollThreshold}
796-
onLoadMore={handleOnLoadMore}
797-
internalRowHeight={internalRowHeight}
798-
popInRowHeight={popInRowHeight}
799-
rows={rows}
800-
handleExternalScroll={handleBodyScroll}
801-
visibleRows={internalVisibleRowCount}
802-
>
803-
<VirtualTableBody
804-
scrollContainerRef={scrollContainerRef}
805-
classes={classNames}
806-
prepareRow={prepareRow}
807-
rows={rows}
808-
scrollToRef={scrollToRef}
809-
isTreeTable={isTreeTable}
810-
internalRowHeight={internalRowHeight}
811-
popInRowHeight={popInRowHeight}
812-
alternateRowColor={alternateRowColor}
813-
visibleColumns={visibleColumns}
814-
renderRowSubComponent={renderRowSubComponent}
815-
alwaysShowSubComponent={alwaysShowSubComponent}
816-
markNavigatedRow={markNavigatedRow}
717+
{/*todo: This is necessary; otherwise, the overlay bg color will not be applied. https://github.com/SAP/ui5-webcomponents/issues/9723 */}
718+
<span />
719+
</BusyIndicator>
720+
)}
721+
{showOverlay && (
722+
<>
723+
<span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden>
724+
{invalidTableA11yText}
725+
</span>
726+
<div
727+
tabIndex={0}
728+
aria-labelledby={`${titleBarId} ${invalidTableTextId}`}
729+
role="region"
730+
data-component-name="AnalyticalTableOverlay"
731+
className={classNames.overlay}
732+
/>
733+
</>
734+
)}
735+
<div
736+
aria-labelledby={titleBarId}
737+
{...getTableProps()}
738+
tabIndex={showOverlay ? -1 : 0}
739+
role="grid"
740+
aria-rowcount={rows.length}
741+
aria-colcount={visibleColumns.length}
742+
data-per-page={internalVisibleRowCount}
743+
data-component-name="AnalyticalTableContainer"
744+
ref={tableRef}
745+
className={tableClasses}
746+
>
747+
<div className={classNames.tableHeaderBackgroundElement} />
748+
<div className={classNames.tableBodyBackgroundElement} />
749+
{headerGroups.map((headerGroup) => {
750+
let headerProps: Record<string, unknown> = {};
751+
if (headerGroup.getHeaderGroupProps) {
752+
headerProps = headerGroup.getHeaderGroupProps();
753+
}
754+
return (
755+
tableRef.current && (
756+
<ColumnHeaderContainer
757+
ref={headerRef}
758+
key={headerProps.key as string}
759+
resizeInfo={tableState.columnResizing}
760+
headerProps={headerProps}
761+
headerGroup={headerGroup}
762+
onSort={onSort}
763+
onGroupByChanged={onGroupByChanged}
817764
isRtl={isRtl}
818-
subComponentsHeight={tableState.subComponentsHeight}
819-
dispatch={dispatch}
820765
columnVirtualizer={columnVirtualizer}
821-
manualGroupBy={reactTableOptions?.manualGroupBy as boolean | undefined}
822-
subRowsKey={subRowsKey}
823-
subComponentsBehavior={subComponentsBehavior}
824-
triggerScroll={tableState.triggerScroll}
825-
rowVirtualizer={rowVirtualizer}
766+
uniqueId={uniqueId}
767+
showVerticalEndBorder={showVerticalEndBorder}
826768
/>
827-
</VirtualTableBodyContainer>
828-
)}
829-
</div>
830-
{(additionalEmptyRowsCount || tableState.isScrollable === undefined || tableState.isScrollable) && (
831-
<VerticalScrollbar
769+
)
770+
);
771+
})}
772+
{loading && rows?.length === 0 && (
773+
<TablePlaceholder columns={visibleColumns} rows={minRows} style={noDataStyles} />
774+
)}
775+
{!loading && rows?.length === 0 && (
776+
<NoDataComponent
777+
noDataText={noDataTextLocal}
778+
className={classNames.noDataContainer}
779+
style={noDataStyles}
780+
/>
781+
)}
782+
{rows?.length > 0 && tableRef.current && (
783+
<VirtualTableBodyContainer
784+
rowCollapsedFlag={tableState.rowCollapsed}
785+
dispatch={dispatch}
832786
tableBodyHeight={tableBodyHeight}
833-
internalRowHeight={internalHeaderRowHeight}
834-
tableRef={tableRef}
835-
handleVerticalScrollBarScroll={handleVerticalScrollBarScroll}
836-
ref={verticalScrollBarRef}
837-
scrollContainerRef={scrollContainerRef}
787+
totalColumnsWidth={columnVirtualizer.getTotalSize()}
838788
parentRef={parentRef}
839-
nativeScrollbar={className?.includes('ui5-content-native-scrollbars')}
840-
/>
789+
classes={classNames}
790+
infiniteScroll={infiniteScroll}
791+
infiniteScrollThreshold={infiniteScrollThreshold}
792+
onLoadMore={handleOnLoadMore}
793+
internalRowHeight={internalRowHeight}
794+
popInRowHeight={popInRowHeight}
795+
rows={rows}
796+
handleExternalScroll={handleBodyScroll}
797+
visibleRows={internalVisibleRowCount}
798+
>
799+
<VirtualTableBody
800+
scrollContainerRef={scrollContainerRef}
801+
classes={classNames}
802+
prepareRow={prepareRow}
803+
rows={rows}
804+
scrollToRef={scrollToRef}
805+
isTreeTable={isTreeTable}
806+
internalRowHeight={internalRowHeight}
807+
popInRowHeight={popInRowHeight}
808+
alternateRowColor={alternateRowColor}
809+
visibleColumns={visibleColumns}
810+
renderRowSubComponent={renderRowSubComponent}
811+
alwaysShowSubComponent={alwaysShowSubComponent}
812+
markNavigatedRow={markNavigatedRow}
813+
isRtl={isRtl}
814+
subComponentsHeight={tableState.subComponentsHeight}
815+
dispatch={dispatch}
816+
columnVirtualizer={columnVirtualizer}
817+
manualGroupBy={reactTableOptions?.manualGroupBy as boolean | undefined}
818+
subRowsKey={subRowsKey}
819+
subComponentsBehavior={subComponentsBehavior}
820+
triggerScroll={tableState.triggerScroll}
821+
rowVirtualizer={rowVirtualizer}
822+
/>
823+
</VirtualTableBodyContainer>
841824
)}
842-
</FlexBox>
843-
{visibleRowCountMode === AnalyticalTableVisibleRowCountMode.Interactive && (
844-
<VerticalResizer
845-
popInRowHeight={popInRowHeight}
846-
hasPopInColumns={tableState?.popInColumns?.length > 0}
847-
analyticalTableRef={analyticalTableRef}
848-
dispatch={dispatch}
849-
extensionsHeight={extensionsHeight}
850-
internalRowHeight={internalRowHeight}
851-
rowsLength={rows.length}
852-
visibleRows={internalVisibleRowCount}
853-
handleOnLoadMore={handleOnLoadMore}
825+
</div>
826+
{(additionalEmptyRowsCount || tableState.isScrollable === undefined || tableState.isScrollable) && (
827+
<VerticalScrollbar
828+
tableBodyHeight={tableBodyHeight}
829+
internalRowHeight={internalHeaderRowHeight}
830+
tableRef={tableRef}
831+
handleVerticalScrollBarScroll={handleVerticalScrollBarScroll}
832+
ref={verticalScrollBarRef}
833+
scrollContainerRef={scrollContainerRef}
834+
parentRef={parentRef}
835+
nativeScrollbar={className?.includes('ui5-content-native-scrollbars')}
854836
/>
855837
)}
856-
</BusyIndicator>
838+
</FlexBox>
839+
{visibleRowCountMode === AnalyticalTableVisibleRowCountMode.Interactive && (
840+
<VerticalResizer
841+
popInRowHeight={popInRowHeight}
842+
hasPopInColumns={tableState?.popInColumns?.length > 0}
843+
analyticalTableRef={analyticalTableRef}
844+
dispatch={dispatch}
845+
extensionsHeight={extensionsHeight}
846+
internalRowHeight={internalRowHeight}
847+
rowsLength={rows.length}
848+
visibleRows={internalVisibleRowCount}
849+
handleOnLoadMore={handleOnLoadMore}
850+
/>
851+
)}
857852
</div>
858853
<Text
859854
aria-hidden="true"

0 commit comments

Comments
 (0)