Fix optimistic rendering issues on views (#2851)

* Fix optimistic rendering issues on views

* Remove virtualizer

front/src/modules/object-record/hooks/useFindManyRecords.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { useQuery } from '@apollo/client';
 import { isNonEmptyArray } from '@apollo/client/utilities';
 import { isNonEmptyString } from '@sniptt/guards';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -55,7 +55,7 @@ export const useFindManyRecords = <
     hasNextPageFamilyState(findManyQueryStateIdentifier),
   );
 
-  const [, setIsFetchingMoreObjects] = useRecoilState(
+  const setIsFetchingMoreObjects = useSetRecoilState(
     isFetchingMoreRecordsFamilyState(findManyQueryStateIdentifier),
   );
 
@@ -142,6 +142,18 @@ export const useFindManyRecords = <
                 ...fetchMoreResult?.[objectMetadataItem.namePlural]?.edges,
               ]);
             }
+
+            if (data?.[objectMetadataItem.namePlural]) {
+              setLastCursor(
+                fetchMoreResult?.[objectMetadataItem.namePlural]?.pageInfo
+                  .endCursor,
+              );
+              setHasNextPage(
+                fetchMoreResult?.[objectMetadataItem.namePlural]?.pageInfo
+                  .hasNextPage,
+              );
+            }
+
             onCompleted?.({
               __typename: `${capitalize(
                 objectMetadataItem.nameSingular,
@@ -151,15 +163,6 @@ export const useFindManyRecords = <
                 fetchMoreResult?.[objectMetadataItem.namePlural].pageInfo,
             });
 
-            if (data?.[objectMetadataItem.namePlural]) {
-              setLastCursor(
-                data?.[objectMetadataItem.namePlural]?.pageInfo.endCursor,
-              );
-              setHasNextPage(
-                data?.[objectMetadataItem.namePlural]?.pageInfo.hasNextPage,
-              );
-            }
-
             return Object.assign({}, prev, {
               [objectMetadataItem.namePlural]: {
                 __typename: `${capitalize(
@@ -218,5 +221,6 @@ export const useFindManyRecords = <
     loading,
     error,
     fetchMoreRecords,
+    queryStateIdentifier: findManyQueryStateIdentifier,
   };
 };

front/src/modules/object-record/hooks/useObjectRecordTable.ts

@@ -1,4 +1,4 @@
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
@@ -21,11 +21,12 @@ export const useObjectRecordTable = () => {
       objectNameSingular,
     },
   );
-
-  const { tableFiltersState, tableSortsState } = useRecordTableScopedStates();
+  const { tableFiltersState, tableSortsState, tableLastRowVisibleState } =
+    useRecordTableScopedStates();
 
   const tableFilters = useRecoilValue(tableFiltersState);
   const tableSorts = useRecoilValue(tableSortsState);
+  const setLastRowVisible = useSetRecoilState(tableLastRowVisibleState);
 
   const filter = turnFiltersIntoWhereClause(
     tableFilters,
@@ -36,16 +37,21 @@ export const useObjectRecordTable = () => {
     foundObjectMetadataItem?.fields ?? [],
   );
 
-  const { records, loading, fetchMoreRecords } = useFindManyRecords({
-    objectNameSingular,
-    filter,
-    orderBy,
-  });
+  const { records, loading, fetchMoreRecords, queryStateIdentifier } =
+    useFindManyRecords({
+      objectNameSingular,
+      filter,
+      orderBy,
+      onCompleted: () => {
+        setLastRowVisible(false);
+      },
+    });
 
   return {
     records,
     loading,
     fetchMoreRecords,
+    queryStateIdentifier,
     setRecordTableData,
   };
 };

front/src/modules/object-record/hooks/useUpdateOneRecord.ts

@@ -7,21 +7,16 @@ import { capitalize } from '~/utils/string/capitalize';
 export const useUpdateOneRecord = <T>({
   objectNameSingular,
 }: ObjectMetadataItemIdentifier) => {
-  const {
-    objectMetadataItem,
-    updateOneRecordMutation,
-    getRecordFromCache,
-    findManyRecordsQuery,
-  } = useObjectMetadataItem({
-    objectNameSingular,
-  });
+  const { objectMetadataItem, updateOneRecordMutation, getRecordFromCache } =
+    useObjectMetadataItem({
+      objectNameSingular,
+    });
 
   const apolloClient = useApolloClient();
 
   const updateOneRecord = async ({
     idToUpdate,
     input,
-    forceRefetch,
   }: {
     idToUpdate: string;
     input: Record<string, any>;