Fix Filtered index view infinite re-render (#5286)

The whole viewBar component was re-rendered on view changes which was
introducing performance issue. The need was to compute page title, this
should be done in a lower level component

packages/twenty-front/src/modules/views/components/ViewBar.tsx

@@ -5,17 +5,15 @@ import { ObjectFilterDropdownButton } from '@/object-record/object-filter-dropdo
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
 import { ObjectSortDropdownButton } from '@/object-record/object-sort-dropdown/components/ObjectSortDropdownButton';
 import { TopBar } from '@/ui/layout/top-bar/TopBar';
-import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 import { QueryParamsFiltersEffect } from '@/views/components/QueryParamsFiltersEffect';
 import { QueryParamsViewIdEffect } from '@/views/components/QueryParamsViewIdEffect';
 import { ViewBarEffect } from '@/views/components/ViewBarEffect';
 import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
+import { ViewBarPageTitle } from '@/views/components/ViewBarPageTitle';
 import { ViewBarSortEffect } from '@/views/components/ViewBarSortEffect';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewScope } from '@/views/scopes/ViewScope';
 import { GraphQLView } from '@/views/types/GraphQLView';
 import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDropdown';
-import { capitalize } from '~/utils/string/capitalize';
 
 import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
 
@@ -37,9 +35,6 @@ export const ViewBar = ({
 }: ViewBarProps) => {
   const { objectNamePlural } = useParams();
 
-  const { currentViewWithCombinedFiltersAndSorts: currentView } =
-    useGetCurrentView(viewBarId);
-
   const filterDropdownId = 'view-filter';
   const sortDropdownId = 'view-sort';
 
@@ -47,10 +42,6 @@ export const ViewBar = ({
     return;
   }
 
-  const pageTitle = currentView?.name
-    ? `${currentView?.name} - ${capitalize(objectNamePlural)}`
-    : capitalize(objectNamePlural);
-
   return (
     <ViewScope
       viewScopeId={viewBarId}
@@ -62,7 +53,7 @@ export const ViewBar = ({
       <QueryParamsFiltersEffect />
       <QueryParamsViewIdEffect />
 
-      <PageTitle title={pageTitle} />
+      <ViewBarPageTitle viewBarId={viewBarId} />
       <TopBar
         className={className}
         leftComponent={

packages/twenty-front/src/modules/views/components/ViewBarPageTitle.tsx

@@ -0,0 +1,26 @@
+import { useParams } from 'react-router-dom';
+
+import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { capitalize } from '~/utils/string/capitalize';
+
+export type ViewBarPageTitleProps = {
+  viewBarId: string;
+};
+
+export const ViewBarPageTitle = ({ viewBarId }: ViewBarPageTitleProps) => {
+  const { objectNamePlural } = useParams();
+
+  const { currentViewWithCombinedFiltersAndSorts: currentView } =
+    useGetCurrentView(viewBarId);
+
+  if (!objectNamePlural) {
+    return;
+  }
+
+  const pageTitle = currentView?.name
+    ? `${currentView?.name} - ${capitalize(objectNamePlural)}`
+    : capitalize(objectNamePlural);
+
+  return <PageTitle title={pageTitle} />;
+};