[AnalyticalTable]: NoDataComponent shows during loading when alwaysShowBusyIndicator is used

[clevianerebeca-silva]

Describe the bug

According to AnalyticalTable docs, NoDataComponent is rendered when the table is not loading, but when alwaysShowBusyIndicator is passed, NoDataComponent is rendered during initial loading (when data is still empty). Is this the expected behavior?

Isolated Example

https://stackblitz.com/edit/github-5krcbd4i?file=src%2FApp.tsx

Reproduction steps

1. Create a AnalyticalTable component and use alwaysShowBusyIndicator prop
2. Pass loading = true and data empty
   ...

Expected Behaviour

NoDataComponent should not appear when the table is loading

Screenshots or Videos

UI5 Web Components for React Version

2.21.3

UI5 Web Components Version

2.21.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[DougDK]

You're right that the docs describe the default behavior — NoDataComponent is suppressed while loading is true. However, alwaysShowBusyIndicator changes that contract.

Without it, the table switches between two mutually exclusive states: loading (shows placeholder loading, hides NoDataComponent) or not loading (shows data or NoDataComponent). The loading flag gates which is rendered.

With alwaysShowBusyIndicator, the busy indicator is overlaid on top of the table at all times during loading — it doesn't replace the normal render logic, it just adds a persistent overlay. This means the table still evaluates whether to show NoDataComponent based on the empty data, and both end up rendered simultaneously (busy indicator on top, NoDataComponent underneath).

So yes, I believe it's the expected behavior given how the prop works — the docs just don't call out this interaction explicitly. It's an edge case.

The workaround is to guard NoDataComponent yourself using the loading state:

<AnalyticalTable
  columns={[
    {
      Header: 'Name',
      accessor: 'name',
    },
    {
      Header: 'Age',
      accessor: 'age',
      hAlign: 'End',
    },
  ]}
  data={[]}
  loading={loading}
  alwaysShowBusyIndicator={true}
  NoDataComponent={loading ? () => null : undefined}
/>