search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
98 stars 138 forks source link

Dynamic nested rows skeleton always showing regardless of dynamic prop being set #5983

Closed jeesonjohnson closed 2 months ago

jeesonjohnson commented 2 months ago

Package

Carbon for IBM Products

Description

When using a nested row with the DataGrid component, we continuously see a loading skeleton beneath the nested rows, when there are more than 2 levels of nesting.

See video below for visual example:

https://github.com/user-attachments/assets/4dae9bb6-5471-4211-a486-76e5f14e938a

We have identified that the reason for breakage, is due to changes made in this PR. Even though in our code we do not supply the getAsyncSubRows rows prop to the table, we see related behaviour within our component. Specifically, this line of the code. We got it working locally by disabling this if statement, and checking for the getAsyncSubRows props is defined.

Component(s) impacted

DataGrid component

Browser

Chrome, Safari, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.48.0

Suggested Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

CloudPakForIntegration (CP4I)

CodeSandbox or Stackblitz example

na

Steps to reproduce the issue (if applicable)

Have multiple nested rows on a DataGrid component, without the getAsyncSubRows prop defined. Expand all rows and see the loading skeleton be rendered.

Release date (if applicable)

No response

Code of Conduct

amal-k-joy commented 2 months ago

Hey @jeesonjohnson , Could you please provide a codesandbox/ stackblitz with a minimal reproduction, so that we could assist better?

jeesonjohnson commented 2 months ago

Hi @amal-k-joy, I have attached an instance of the broken code-sandbox here.

As is indicated by my comment, the error persists when the getSubRows: (row) => row.subRows function is removed from the resource table props. This was not previously the case. (See Example.jsx line 35)