Improve Performances of FE by reducing first print queries (#2623)

front/src/modules/ui/object/record-table/components/RecordTable.tsx

@@ -1,17 +1,12 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
 
+import { RecordTableInternalEffect } from '@/ui/object/record-table/components/RecordTableInternalEffect';
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import {
-  useListenClickOutside,
-  useListenClickOutsideByClassName,
-} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
-import { useRecordTable } from '../hooks/useRecordTable';
-import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
 import { RecordTableBody } from './RecordTableBody';
 import { RecordTableHeader } from './RecordTableHeader';
@@ -82,37 +77,7 @@ type RecordTableProps = {
 export const RecordTable = ({ updateEntityMutation }: RecordTableProps) => {
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
-  const {
-    leaveTableFocus,
-    setRowSelectedState,
-    resetTableRowSelection,
-    useMapKeyboardToSoftFocus,
-  } = useRecordTable();
-
-  useMapKeyboardToSoftFocus();
-
-  useListenClickOutside({
-    refs: [tableBodyRef],
-    callback: () => {
-      leaveTableFocus();
-    },
-  });
-
-  useScopedHotkeys(
-    'escape',
-    () => {
-      resetTableRowSelection();
-    },
-    TableHotkeyScope.Table,
-  );
-
-  useListenClickOutsideByClassName({
-    classNames: ['entity-table-cell'],
-    excludeClassNames: ['action-bar', 'context-menu'],
-    callback: () => {
-      resetTableRowSelection();
-    },
-  });
+  const { resetTableRowSelection, setRowSelectedState } = useRecordTable();
 
   return (
     <ScrollWrapper>
@@ -130,6 +95,7 @@ export const RecordTable = ({ updateEntityMutation }: RecordTableProps) => {
                 onDragSelectionChange={setRowSelectedState}
               />
             </div>
+            <RecordTableInternalEffect tableBodyRef={tableBodyRef} />
           </StyledTableContainer>
         </StyledTableWithHeader>
       </EntityUpdateMutationContext.Provider>

front/src/modules/ui/object/record-table/components/RecordTableInternalEffect.tsx

@@ -0,0 +1,45 @@
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
+import { TableHotkeyScope } from '@/ui/object/record-table/types/TableHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import {
+  useListenClickOutside,
+  useListenClickOutsideByClassName,
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+
+type RecordTableInternalEffectProps = {
+  tableBodyRef: React.RefObject<HTMLDivElement>;
+};
+
+export const RecordTableInternalEffect = ({
+  tableBodyRef,
+}: RecordTableInternalEffectProps) => {
+  const { leaveTableFocus, resetTableRowSelection, useMapKeyboardToSoftFocus } =
+    useRecordTable();
+
+  useMapKeyboardToSoftFocus();
+
+  useListenClickOutside({
+    refs: [tableBodyRef],
+    callback: () => {
+      leaveTableFocus();
+    },
+  });
+
+  useScopedHotkeys(
+    'escape',
+    () => {
+      resetTableRowSelection();
+    },
+    TableHotkeyScope.Table,
+  );
+
+  useListenClickOutsideByClassName({
+    classNames: ['entity-table-cell'],
+    excludeClassNames: ['action-bar', 'context-menu'],
+    callback: () => {
+      resetTableRowSelection();
+    },
+  });
+
+  return <></>;
+};

front/src/modules/ui/object/record-table/hooks/useRecordTable.ts

@@ -18,7 +18,6 @@ import { ColumnDefinition } from '../types/ColumnDefinition';
 import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
 import { useDisableSoftFocus } from './internal/useDisableSoftFocus';
-import { useGetIsSomeCellInEditMode } from './internal/useGetIsSomeCellInEditMode';
 import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
 import { useRecordTableScopedStates } from './internal/useRecordTableScopedStates';
 import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
@@ -99,8 +98,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
 
   const leaveTableFocus = useLeaveTableFocus();
 
-  const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
-
   const setRowSelectedState = useSetRowSelectedState();
 
   const resetTableRowSelection = useResetTableRowSelection();
@@ -308,7 +305,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     setRecordTableData,
     setTableColumns,
     leaveTableFocus,
-    getIsSomeCellInEditMode,
     setRowSelectedState,
     resetTableRowSelection,
     upsertRecordTableItem,

front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellContainer.tsx

@@ -5,11 +5,11 @@ import { IconArrowUpRight } from '@/ui/display/icon';
 import { useGetButtonIcon } from '@/ui/object/field/hooks/useGetButtonIcon';
 import { useIsFieldEmpty } from '@/ui/object/field/hooks/useIsFieldEmpty';
 import { useIsFieldInputOnly } from '@/ui/object/field/hooks/useIsFieldInputOnly';
+import { useGetIsSomeCellInEditMode } from '@/ui/object/record-table/hooks/internal/useGetIsSomeCellInEditMode';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
 import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
-import { useRecordTable } from '../../hooks/useRecordTable';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode';
 import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell';
@@ -57,7 +57,7 @@ export const TableCellContainer = ({
 }: TableCellContainerProps) => {
   const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
 
-  const { getIsSomeCellInEditMode } = useRecordTable();
+  const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
 
   const [isHovered, setIsHovered] = useState(false);