fix: fix table columns resize glitches on slow network (#1707)

Fixes #1580

front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -37,6 +37,7 @@ export const useApolloFactory = () => {
               },
             },
           },
+          ViewField: { keyFields: ['viewId', 'key'] },
         },
       }),
       defaultOptions: {

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -126,6 +126,10 @@ export const EntityTableHeader = () => {
           ),
         );
 
+        set(resizeFieldOffsetState, 0);
+        setInitialPointerPositionX(null);
+        setResizedFieldKey(null);
+
         if (nextWidth !== tableColumnsByKey[resizedFieldKey].size) {
           const nextColumns = tableColumns.map((column) =>
             column.key === resizedFieldKey
@@ -135,10 +139,6 @@ export const EntityTableHeader = () => {
 
           await handleColumnsChange(nextColumns);
         }
-
-        set(resizeFieldOffsetState, 0);
-        setInitialPointerPositionX(null);
-        setResizedFieldKey(null);
       },
     [resizedFieldKey, tableColumnsByKey, tableColumns, handleColumnsChange],
   );

front/src/modules/ui/table/hooks/useTableColumns.ts

@@ -34,10 +34,10 @@ export const useTableColumns = () => {
 
   const handleColumnsChange = useCallback(
     async (columns: ColumnDefinition<ViewFieldMetadata>[]) => {
-      await onColumnsChange?.(columns);
-
       setSavedTableColumns(columns);
       setTableColumns(columns);
+
+      await onColumnsChange?.(columns);
     },
     [onColumnsChange, setSavedTableColumns, setTableColumns],
   );

front/src/modules/views/graphql/fragments/viewFieldFragment.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const VIEW_FIELD_FRAGMENT = gql`
+  fragment ViewFieldFragment on ViewField {
+    index
+    isVisible
+    key
+    name
+    size
+    viewId
+  }
+`;

front/src/modules/views/graphql/mutations/updateViewField.ts

@@ -6,11 +6,7 @@ export const UPDATE_VIEW_FIELD = gql`
     $where: ViewFieldWhereUniqueInput!
   ) {
     updateOneViewField(data: $data, where: $where) {
-      index
-      isVisible
-      key
-      name
-      size
+      ...ViewFieldFragment
     }
   }
 `;

front/src/modules/views/graphql/queries/getViewFields.ts

@@ -6,11 +6,7 @@ export const GET_VIEW_FIELDS = gql`
     $orderBy: [ViewFieldOrderByWithRelationInput!]
   ) {
     viewFields: findManyViewField(where: $where, orderBy: $orderBy) {
-      index
-      isVisible
-      key
-      name
-      size
+      ...ViewFieldFragment
     }
   }
 `;

front/src/modules/views/hooks/useTableViewFields.ts

@@ -1,4 +1,5 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
@@ -20,6 +21,8 @@ import {
 import { assertNotNull } from '~/utils/assert';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
+import { GET_VIEW_FIELDS } from '../graphql/queries/getViewFields';
+
 const toViewFieldInput = (
   objectId: 'company' | 'person',
   fieldDefinition: ColumnDefinition<ViewFieldMetadata>,
@@ -45,6 +48,7 @@ export const useTableViewFields = ({
     currentViewIdScopedState,
     TableRecoilScopeContext,
   );
+  const [previousViewId, setPreviousViewId] = useState<string | undefined>();
   const [availableTableColumns, setAvailableTableColumns] =
     useRecoilScopedState(
       availableTableColumnsScopedState,
@@ -78,6 +82,7 @@ export const useTableViewFields = ({
             viewId,
           })),
         },
+        refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
       });
     },
     [createViewFieldsMutation, currentViewId, objectId],
@@ -107,7 +112,7 @@ export const useTableViewFields = ({
     [currentViewId, updateViewFieldMutation],
   );
 
-  const { refetch } = useGetViewFieldsQuery({
+  useGetViewFieldsQuery({
     skip: !currentViewId || skipFetch,
     variables: {
       orderBy: { index: SortOrder.Asc },
@@ -118,8 +123,7 @@ export const useTableViewFields = ({
     onCompleted: async (data) => {
       if (!data.viewFields.length) {
         // Populate if empty
-        await createViewFields(columnDefinitions);
-        return refetch();
+        return createViewFields(columnDefinitions);
       }
 
       const nextColumns = data.viewFields
@@ -141,9 +145,14 @@ export const useTableViewFields = ({
         })
         .filter<ColumnDefinition<ViewFieldMetadata>>(assertNotNull);
 
-      if (!isDeeplyEqual(tableColumns, nextColumns)) {
-        setSavedTableColumns(nextColumns);
+      setSavedTableColumns(nextColumns);
+
+      if (
+        previousViewId !== currentViewId &&
+        !isDeeplyEqual(tableColumns, nextColumns)
+      ) {
         setTableColumns(nextColumns);
+        setPreviousViewId(currentViewId);
       }
 
       if (!availableTableColumns.length) {
@@ -169,16 +178,8 @@ export const useTableViewFields = ({
             savedTableColumnsByKey[column.key].isVisible !== column.isVisible),
       );
       await updateViewFields(viewFieldsToUpdate);
-
-      await refetch();
     },
-    [
-      createViewFields,
-      currentViewId,
-      refetch,
-      savedTableColumnsByKey,
-      updateViewFields,
-    ],
+    [createViewFields, currentViewId, savedTableColumnsByKey, updateViewFields],
   );
 
   return { createViewFields, persistColumns };