ibm-products icon indicating copy to clipboard operation
ibm-products copied to clipboard

fix(Datagrid): show skeleton body for fetching and global filter state

Open matthewgallo opened this issue 1 year ago • 1 comments

Closes #5659

This PR adds a skeleton body to render if the Datagrid is in a fetching state and there is a global filter provided as well. react-table forces the rows property to be an empty array when isFetching is true and if initialState.globalFilter contains a value, our current implementation shows nothing in this scenario, instead we'll now show loading skeletons.

What did you change?

packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
packages/ibm-products/src/components/Datagrid/Datagrid/DatagridBody.tsx
packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.tsx
packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSkeletonBody.tsx
packages/ibm-products/src/components/Datagrid/types/index.ts

How did you test and verify your work?

Storybook, temporarily updated Selectable rows story to reproduce behavior

matthewgallo avatar Jul 24 '24 19:07 matthewgallo