diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx b/packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx index 3c32f7064faf..9e3f51fcfd08 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx +++ b/packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx @@ -24,6 +24,7 @@ import { useStrapiApp, } from '@strapi/helper-plugin'; import { ArrowLeft, Plus } from '@strapi/icons'; +import isEqual from 'lodash/isEqual'; import { stringify } from 'qs'; import { useIntl } from 'react-intl'; import { useNavigate, Link as ReactRouterLink } from 'react-router-dom'; @@ -44,6 +45,7 @@ import { convertListLayoutToFieldLayouts, useDocumentLayout, } from '../../hooks/useDocumentLayout'; +import { usePrev } from '../../hooks/usePrev'; import { useSyncRbac } from '../../hooks/useSyncRbac'; import { useDeleteDocumentMutation, useGetAllDocumentsQuery } from '../../services/documents'; import { buildValidParams } from '../../utils/api'; @@ -84,9 +86,16 @@ const ListViewPage = () => { const [displayedHeaders, setDisplayedHeaders] = React.useState([]); + const listLayout = usePrev(list.layout); React.useEffect(() => { - setDisplayedHeaders(list.layout); - }, [list.layout]); + /** + * ONLY update the displayedHeaders if the document + * layout has actually changed in value. + */ + if (!isEqual(listLayout, list.layout)) { + setDisplayedHeaders(list.layout); + } + }, [list.layout, listLayout]); const handleSetHeaders = (headers: string[]) => { setDisplayedHeaders(