feat(charts): introduce loadingDelay prop (#6027)

Author: Lukas742

packages/charts/src/components/BarChart/BarChart.tsx

@@ -130,6 +130,7 @@ export interface BarChartProps extends IChartBaseProps {
 const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     noLegend,
     noAnimation,
@@ -226,6 +227,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? BarChartPlaceholder}
       ref={componentRef}
       style={style}

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -128,6 +128,7 @@ type AvailableChartTypes = 'primary' | 'comparison' | 'additional' | string;
 const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     onDataPointClick,
     noLegend,
@@ -271,6 +272,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
     <ChartContainer
       ref={componentRef}
       loading={loading}
+      loadingDelay={loadingDelay}
       dataset={dataset}
       Placeholder={ChartPlaceholder ?? Placeholder}
       style={style}

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -128,6 +128,7 @@ const valueAccessor =
 const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     noLegend,
     noAnimation,
@@ -225,6 +226,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? ColumnChartPlaceholder}
       ref={componentRef}
       style={style}

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx

@@ -106,6 +106,7 @@ type AvailableChartTypes = 'line' | 'bar' | string;
 const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     style,
     className,
@@ -177,6 +178,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
           tooltipConfig={lineTooltipConfig}
           noAnimation={noAnimation}
           loading={loading}
+          loadingDelay={loadingDelay}
           onClick={onClick}
           syncId={syncId}
           style={{ ...style, height: `calc(${style?.height} * 0.2)` }}
@@ -201,6 +203,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
         noAnimation={noAnimation}
         noLegend={noLegend}
         loading={loading}
+        loadingDelay={loadingDelay}
         onClick={onClick}
         onDataPointClick={onDataPointClick}
         syncId={syncId}

packages/charts/src/components/ComposedChart/index.tsx

@@ -142,6 +142,7 @@ type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
 const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     onDataPointClick,
     noLegend,
@@ -276,6 +277,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
     <ChartContainer
       ref={componentRef}
       loading={loading}
+      loadingDelay={loadingDelay}
       dataset={dataset}
       Placeholder={ChartPlaceholder ?? Placeholder}
       style={style}

packages/charts/src/components/LineChart/LineChart.tsx

@@ -115,6 +115,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
   const {
     dataset,
     loading,
+    loadingDelay,
     noLegend,
     noAnimation,
     tooltipConfig,
@@ -214,6 +215,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? LineChartPlaceholder}
       ref={componentRef}
       style={style}

packages/charts/src/components/MicroBarChart/MicroBarChart.tsx

@@ -90,7 +90,7 @@ const resolveColor = (index: number, color = null) => {
  * The `MicroBarChart` compares different values of the same category to each other by displaying them in a compact way.
  */
 const MicroBarChart = forwardRef<HTMLDivElement, MicroBarChartProps>((props, ref) => {
-  const { loading, dataset, onDataPointClick, style, className, slot, ChartPlaceholder, ...rest } = props;
+  const { loading, loadingDelay, dataset, onDataPointClick, style, className, slot, ChartPlaceholder, ...rest } = props;
 
   useStylesheet(styleData, MicroBarChart.displayName);
 
@@ -140,6 +140,7 @@ const MicroBarChart = forwardRef<HTMLDivElement, MicroBarChartProps>((props, ref
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? BarChartPlaceholder}
       ref={ref}
       style={style}

packages/charts/src/components/PieChart/PieChart.tsx

@@ -91,6 +91,7 @@ const tooltipItemDefaultStyle = { color: 'var (--sapTextColor)' };
 const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     noLegend,
     noAnimation,
@@ -267,6 +268,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
       dataset={dataset}
       ref={ref}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? PieChartPlaceholder}
       style={style}
       className={className}

packages/charts/src/components/RadarChart/RadarChart.tsx

@@ -80,6 +80,7 @@ const measureDefaults = {
 const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     noLegend,
     noAnimation,
@@ -166,6 +167,7 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
       dataset={dataset}
       ref={ref}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? PieChartPlaceholder}
       style={style}
       className={className}

packages/charts/src/components/RadialChart/RadialChart.tsx

@@ -17,7 +17,7 @@ interface RadialChartConfig {
 
   [rest: string]: any;
 }
-
+//todo expose `loading`
 export interface RadialChartProps extends Omit<CommonProps, 'onClick' | 'children' | 'onLegendClick'> {
   /**
    * The actual value which defines how much the ring is filled.
@@ -126,6 +126,8 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
 
   return (
     <ChartContainer
+      loading={undefined}
+      loadingDelay={undefined}
       dataset={dataset}
       ref={ref}
       Placeholder={PieChartPlaceholder}

packages/charts/src/components/ScatterChart/ScatterChart.tsx

@@ -133,6 +133,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
   const {
     dataset,
     loading,
+    loadingDelay,
     noLegend,
     noAnimation,
     tooltipConfig,
@@ -216,6 +217,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? ScatterChartPlaceholder}
       ref={componentRef}
       style={style}

packages/charts/src/interfaces/IChartBaseProps.ts

@@ -7,10 +7,15 @@ export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonP
   /**
    * Flag whether the chart should display a loading indicator.
    *
-   * This can either be a placeholder shimmer (in case the chart has no data yet) or a small
-   * loading bar in the top of the chart (in case the chart has already some data to display).
+   * This can either be a skeleton placeholder shimmer (in case the chart has no data yet) or a `BusyIndicator` on top of the chart (in case the chart has already some data to display).
    */
   loading?: boolean;
+  /**
+   * Defines the delay in milliseconds, after which the `BusyIndicator` will be visible on the screen.
+   *
+   * @default 1000
+   */
+  loadingDelay?: number;
   /**
    * The `dataset` is an array of object which will be displayed in the chart.
    */

packages/charts/src/internal/ChartContainer.tsx

@@ -23,9 +23,10 @@ addCustomCSSWithScoping(
 
 export interface ContainerProps extends CommonProps {
   children: ReactElement;
-  Placeholder?: ComponentType;
+  Placeholder: ComponentType;
   dataset: unknown[];
-  loading?: boolean;
+  loading: boolean;
+  loadingDelay: number;
   resizeDebounce: number;
 }
 
@@ -49,7 +50,17 @@ class ErrorBoundary extends Component<{ children: ReactNode }, { errorCount: num
 }
 
 const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
-  const { Placeholder, loading = false, dataset, className, slot, children, resizeDebounce, ...rest } = props;
+  const {
+    Placeholder,
+    loading = false,
+    dataset,
+    className,
+    slot,
+    children,
+    resizeDebounce,
+    loadingDelay,
+    ...rest
+  } = props;
 
   useStylesheet(styleData, ChartContainer.displayName);
 
@@ -60,6 +71,7 @@ const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =
           {loading && (
             <BusyIndicator
               active
+              delay={loadingDelay}
               className={classNames.busyIndicator}
               data-component-name="ChartContainerBusyIndicator"
             />