AnalyticalTable: Div AnalyticalTableNoDataContainer has fixed height style which breaks NoDataComponent layout

[clevianerebeca-silva]

Describe the bug

After upgrading to @ui5/webcomponents-react 2.10.0, we noticed that the loading indicator we render via the NoDataComponent inside the <AnalyticalTable /> is no longer visible. It appears that a new <div> "AnalyticalTableNoDataContainer" was introduced around the NoDataComponent, and it comes with a fixed height style based on the table body. However, during loading:

• The table has no data.
• We set minRows={1}, which makes the table body height quite small.
• Our custom NoDataComponent has a greater height than the table body at this point, causing the loading indicator to be clipped

Temporary Fix:
To make it visible again, we had to override the AnalyticalTableNoDataContainer height using height: 100% !important which is not ideal

Isolated Example

https://stackblitz.com/edit/github-57uefeze?file=src%2Fmain.tsx

Reproduction steps

1- Render the <AnalyticalTable /> component with minRows={1}.
2- Provide a custom NoDataComponent with content higher than a single row height (e.g. 200px).
3- Trigger the loading state
4- Observe that the content inside the NoDataComponent is clipped due to the fixed height of the surrounding wrapper

Expected Behaviour

Loading indicator should be visible

Screenshots or Videos

No response

UI5 Web Components for React Version

2.10.0

UI5 Web Components Version

2.10.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.

[Lukas742]

Hi @clevianerebeca-silva

This change was made due to an accessibility issue.
To prevent UI elements from jumping, we assumed the placeholder should always have the same height as the table defined by its minRows.

Also, the prop is intended solely for no-data placeholders (such as an IllustratedMessage), not for loading indicators—partly to ensure accessibility.

That said, you can still increase the size of the placeholder without overriding styles by adjusting the minRows during loading. Here’s an example demonstrating this approach. Would that work for you?

Additionally, we’ll clarify which component is expected for NoDataComponent in this PR.

[clevianerebeca-silva]

Hi @Lukas742, thanks for the info! What’s the recommended way to add a custom loading indicator inside the table? If I understand correctly, we’re currently misusing the NoDataComponent.

But yes, this workaround you mentioned would work, but as it works with height 100%. Which one is better? is there any recommendation here?

[Lukas742]

Hi @clevianerebeca-silva

No, not at the moment. Based on your example, it seems you'd like to always display the BusyIndicator, even when no data is available - rather than showing the skeleton loading indicator. Is that correct?

If so, would introducing a prop like alwaysUseBusyIndicator?: boolean be sufficient for your use-case?

If you're looking to render something else, could you please share more details about your use-case?

[clevianerebeca-silva]

Hi @Lukas742!

Correct, we need to show the BusyIndicator when the data is loading, instead of skeleton. Right now we are using like this:

 if (error)
    return <IllustratedMessage .../>

 if (data?.length === 0 && !loading)
    return <IllustratedMessage .../>


 return (
   <AnalyticalTable
      columns={columns}
      data={data}
      {...(loading && {
            NoDataComponent: () => (
              <div className={style.dataLoading}>
                <BusyIndicator active delay={0} />
              </div>
            ),
      })}
     ....
   />
) 

• if it's loading, we show the table with the BusyIndicator
• if we have an error or no data, we show the IllustratedMessage outside the table

This is based on the designs https://www.figma.com/design/3rrnJnNbOqU25sicgy6uyo/My-Process-Overview?node-id=908-70435&t=xCMQGj0wLJRCAmya-0