Improve RecordShowPage Header performances (#6440)

In this PR, I am:
- removing a useEffect (we use the onCompleted prop of useFindManyQuery
hook)
- moving this logic into a RecordShowPageHeader to avoid re-renders of
the whole tree

packages/twenty-front/src/pages/object-record/RecordShowPage.tsx

@@ -3,16 +3,15 @@ import { useParams } from 'react-router-dom';
 import { TimelineActivityContext } from '@/activities/timelineActivities/contexts/TimelineActivityContext';
 import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
 import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
-import { useRecordShowPagePagination } from '@/object-record/record-show/hooks/useRecordShowPagePagination';
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
 import { PageFavoriteButton } from '@/ui/layout/page/PageFavoriteButton';
-import { PageHeader } from '@/ui/layout/page/PageHeader';
 import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { ShowPageMoreButton } from '@/ui/layout/show-page/components/ShowPageMoreButton';
 import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
+import { RecordShowPageHeader } from '~/pages/object-record/RecordShowPageHeader';
 
 export const RecordShowPage = () => {
   const parameters = useParams<{
@@ -36,33 +35,15 @@ export const RecordShowPage = () => {
     parameters.objectRecordId ?? '',
   );
 
-  const {
-    viewName,
-    hasPreviousRecord,
-    hasNextRecord,
-    navigateToPreviousRecord,
-    navigateToNextRecord,
-    navigateToIndexView,
-  } = useRecordShowPagePagination(
-    parameters.objectNameSingular ?? '',
-    parameters.objectRecordId ?? '',
-  );
-
   return (
     <RecordFieldValueSelectorContextProvider>
       <RecordValueSetterEffect recordId={objectRecordId} />
       <PageContainer>
         <PageTitle title={pageTitle} />
-        <PageHeader
-          title={viewName}
-          hasPaginationButtons
-          hasClosePageButton
-          onClosePage={navigateToIndexView}
-          hasPreviousRecord={hasPreviousRecord}
-          navigateToPreviousRecord={navigateToPreviousRecord}
-          hasNextRecord={hasNextRecord}
-          navigateToNextRecord={navigateToNextRecord}
-          Icon={headerIcon}
+        <RecordShowPageHeader
+          objectNameSingular={objectNameSingular}
+          objectRecordId={objectRecordId}
+          headerIcon={headerIcon}
         >
           <>
             <PageFavoriteButton
@@ -82,7 +63,7 @@ export const RecordShowPage = () => {
               objectNameSingular={objectNameSingular}
             />
           </>
-        </PageHeader>
+        </RecordShowPageHeader>
         <PageBody>
           <TimelineActivityContext.Provider
             value={{

packages/twenty-front/src/pages/object-record/RecordShowPageHeader.tsx

@@ -0,0 +1,41 @@
+import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
+import { useRecordShowPagePagination } from '@/object-record/record-show/hooks/useRecordShowPagePagination';
+import { PageHeader } from '@/ui/layout/page/PageHeader';
+
+export const RecordShowPageHeader = ({
+  objectNameSingular,
+  objectRecordId,
+  children,
+}: {
+  objectNameSingular: string;
+  objectRecordId: string;
+  headerIcon: React.ComponentType;
+  children?: React.ReactNode;
+}) => {
+  const {
+    viewName,
+    hasPreviousRecord,
+    hasNextRecord,
+    navigateToPreviousRecord,
+    navigateToNextRecord,
+    navigateToIndexView,
+  } = useRecordShowPagePagination(objectNameSingular, objectRecordId);
+
+  const { headerIcon } = useRecordShowPage(objectNameSingular, objectRecordId);
+
+  return (
+    <PageHeader
+      title={viewName}
+      hasPaginationButtons
+      hasClosePageButton
+      onClosePage={navigateToIndexView}
+      hasPreviousRecord={hasPreviousRecord}
+      navigateToPreviousRecord={navigateToPreviousRecord}
+      hasNextRecord={hasNextRecord}
+      navigateToNextRecord={navigateToNextRecord}
+      Icon={headerIcon}
+    >
+      {children}
+    </PageHeader>
+  );
+};