Loading in Datagrid throw Rendered more hooks than during the previous render

Question

I want to display <Loading /> from react-admin when the list is loading

const TabbedDataGrid = (props: TabbedDataGridProps) => {

    const { loading } = useGetList('getListPath');

    return (
        <>
            {loading ? (
                <Loading />
            ) : (
                <Datagrid
                    empty={<ListEmpty />}
                    expand={<ElementShow />}
                >
                    <TextField
                        source="id"
                        label="Id"
                    />
                </Datagrid>
            )}
        </>
    )
}

on page is loading, <Loading /> is displaying as expected, but after loading from Hook useGetList is updated to true, I receive an error:

React has detected a change in the order of Hooks called by TabbedDataGrid. 
This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks

How can I show loading while DataGrid receive new data from dataProvider?

Answer 1

removed useGetList hook and get loading from props

const { loading } = props;

fixed the issue