SAP · Lukas742 · Jul 6, 2024 · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024
@@ -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" />);

@@ -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 } },

@@ -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"

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

diff --git a/packages/base/src/Device/index.cy.tsx b/packages/base/src/Device/index.cy.tsx
 function ResizeTestComponent({ onChange }: { onChange: (event: { width: number; height: number }) => void }) {
  useEffect(() => {
    attachResizeHandler(onChange);
  }, []);

  const unregister = () => {
    detachResizeHandler(onChange);
 }) {
  useEffect(() => {
    attachOrientationChangeHandler(onChange);
  }, []);

  const unregister = () => {
    detachOrientationChangeHandler(onChange);
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
   * @param measure {IChartMeasure} Current measure object
   * @param dataElement {object} Current data element
   */
  highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }

 interface DimensionConfig extends IChartDimension {
    ? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
    : 0;

  const [componentRef, chartRef] = useSyncRef<any>(ref);

  const onItemLegendClick = useLegendItemClick(onLegendClick);
  const labelFormatter = useLabelFormatter(primaryDimension);
diff --git a/packages/charts/src/components/BarChart/Placeholder.tsx b/packages/charts/src/components/BarChart/Placeholder.tsx
      speed={2}
      backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
      foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
      backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
    >
      <rect x="20" y="10" width="1" height="135" />
      <rect x="20" y="20" width="85" height="15" />
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
   * @param measure {IChartMeasure} Current measure object
   * @param dataElement {object} Current data element
   */
  highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }

 interface DimensionConfig extends IChartDimension {
    ...rest
  } = props;

  const [componentRef, chartRef] = useSyncRef<any>(ref);

  const chartConfig: BulletChartProps['chartConfig'] = {
    yAxisVisible: false,
          );
        } else {
          onDataPointClick(
            enrichEventWithDetails({} as any, {
              value: eventOrIndex.value,
              dataKey: eventOrIndex.dataKey,
              dataIndex: eventOrIndex.index,
        {chartConfig.xAxisVisible &&
          dimensions.map((dimension, index) => {
            let AxisComponent;
            const axisProps: any = {
              dataKey: dimension.accessor,
              interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
              tickLine: index < 1,
          />
        )}
        {sortedMeasures?.map((element, index) => {
          const chartElementProps: any = {
            isAnimationActive: !noAnimation
          };
          let labelPosition = 'top';
	function ResizeTestComponent({ onChange }: { onChange: (event: { width: number; height: number }) => void }) {
	useEffect(() => {
	attachResizeHandler(onChange);
	}, []);
Check warning on line 12 in packages/base/src/Device/index.cy.tsx GitHub Actions / lint `React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array`

	const unregister = () => {
	detachResizeHandler(onChange);
	}) {
	useEffect(() => {
	attachOrientationChangeHandler(onChange);
	}, []);
Check warning on line 32 in packages/base/src/Device/index.cy.tsx GitHub Actions / lint `React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array`

	const unregister = () => {
	detachOrientationChangeHandler(onChange);
	* @param measure {IChartMeasure} Current measure object
	* @param dataElement {object} Current data element
	*/
	highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
Check warning on line 79 in packages/charts/src/components/BarChart/BarChart.tsx GitHub Actions / lint `Unexpected any. Specify a different type`
	}

	interface DimensionConfig extends IChartDimension {
	? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
	: 0;

	const [componentRef, chartRef] = useSyncRef<any>(ref);
Check warning on line 188 in packages/charts/src/components/BarChart/BarChart.tsx GitHub Actions / lint `Unexpected any. Specify a different type`

	const onItemLegendClick = useLegendItemClick(onLegendClick);
	const labelFormatter = useLabelFormatter(primaryDimension);
	speed={2}
	backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
	foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
	backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
Check warning on line 15 in packages/charts/src/components/BarChart/Placeholder.tsx GitHub Actions / lint `Unexpected any. Specify a different type`
	>
	<rect x="20" y="10" width="1" height="135" />
	<rect x="20" y="20" width="85" height="15" />