@stoker-platform/web-app 0.5.194 → 0.5.195

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stoker-platform/web-app
 
+## 0.5.195
+
+### Patch Changes
+
+- fix: fix infinite scroll stale records issue
+
 ## 0.5.194
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.194",
+    "version": "0.5.195",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Collection.tsx

@@ -375,9 +375,6 @@ function Collection({
     }, [serverList])
 
     useEffect(() => {
-        if (isAssigning !== undefined) {
-            setBackToStartKey((prev) => prev + 1)
-        }
         if (!relationList || !isInitialized) return
         setFilters((prev) => {
             let next = prev
@@ -397,7 +394,7 @@ function Collection({
             }
             return next
         })
-    }, [isAssigning])
+    }, [isAssigning, isInitialized])
 
     // This is to ensure that the optimistic list is set in cases where cached documents exactly match the downloaded server documents
     // In this case, the cache-only snapshot listener does not fire a second time when the cache has loaded because there is no change to the list

package/src/Images.tsx

@@ -370,6 +370,8 @@ export const Images = memo(
         const [orderByField, setOrderByField] = useState<string | undefined>(undefined)
         const [orderByDirection, setOrderByDirection] = useState<"asc" | "desc" | undefined>(undefined)
 
+        const infiniteLoaderRef = useRef<InfiniteLoader>(null)
+
         const backToStart = useCallback(
             (
                 latestConstraints?: QueryConstraint[],
@@ -377,6 +379,7 @@ export const Images = memo(
                 latestOrderByDirection?: "asc" | "desc",
             ) => {
                 return new Promise<void>((resolve) => {
+                    infiniteLoaderRef.current?.resetloadMoreItemsCache()
                     setServerList({})
                     setList({})
                     const newQuery = {
@@ -659,6 +662,7 @@ export const Images = memo(
 
         useEffect(() => {
             setIsFirstLoad(true)
+            setPrevIds(new Set())
         }, [filters, orderByField, orderByDirection])
 
         useEffect(() => {
@@ -838,6 +842,7 @@ export const Images = memo(
                 >
                     {!formList && (meta?.title || collectionTitle) && <Meta />}
                     <InfiniteLoader
+                        ref={infiniteLoaderRef}
                         isItemLoaded={(index) => index < itemCount}
                         itemCount={100000}
                         loadMoreItems={loadMoreItems}