[manager-components]: Add loading state to Datagrid

[tristanwagner]

Have you already checked if a similar item is present on manager-react-components?

• Yes, I have already checked the existing components/hooks/utils.

What do you expect from this request?

Component

Description

It would be nice to be able to set a loading state (boolean) to the Datagrid component, if loading prop is true then display a spinner instead of the rows or add a row withSkeleton components that reflect the shape of the columns, or put a slot that will be dislayed in the grid if loading prop is true.

Where do you expect to use this?

any project that use Datagrid

Do you have mock-up?

can produce if needed

When do you expect this to be delivered?

any

Additional Information

Guidelines:

<Datagrid
        columns={columns}
        isLoading={}
/>

In Datagrid, display skeleton (make sure skeletons also match the row height with data)on first load. And when "Load More" button is clicked, add more skeleton rows to the bottom of the table and disable "Load More" button while "isLoading" is true.

Also, consider the use-case when sorting/searching/filtering is applied, discard existing rows and display skeleton in the table's body and further "load More" button remains the same.

[aboungnaseng-ovhcloud]

In ods version 18, we will have a state isLoading inside the ods-button

we can trigger this attribute to manage the isLoading state.

But if you are using the current version, you can hide the 'load more' button with the attribute 'hasNextPage', when the status 'isLoading' at true, you can hide the button. And if you want you can display a little spinner in your react app at the bottom of the datagid

[anooparveti]

<Datagrid
        columns={columns}
        isLoading={}
/>

[SimonChaumet]

I don't know what would be best between a slot and a skeleton but personally I prefer the use of a skeleton : the DOM renders faster and the page keeps its size after the data has been fetched, also later we might have multiple requests for a datagrid so a skeleton would be better for it.

[anooparveti]

Guidelines: In Datagrid, display skeleton (make sure skeletons also match the row height with data)on first load. And when "Load More" button is clicked, add more skeleton rows to the bottom of the table and disable "Load More" button while "isLoading" is true.

Also, consider the use-case when sorting/searching/filtering is applied, discard existing rows and display skeleton in the table's body and further "load More" button remains the same.