[Web] Retrigger onEndReached if needed when content height changes (b…

…luesky-social#4859) * Extract EdgeVisibility * Key Visibility by container height instead of item count
quiple · Jul 31, 2024 · 576cef8 · 576cef8
1 parent c75bb65
commit 576cef8
Showing 1 changed file with 32 additions and 3 deletions.
diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx
@@ -344,10 +344,11 @@ function ListImpl<ItemT>(
           style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
         />
         {onStartReached && !isEmpty && (
-          <Visibility
+          <EdgeVisibility
             root={disableFullWindowScroll ? nativeRef : null}
             onVisibleChange={onHeadVisibilityChange}
             topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
+            containerRef={containerRef}
           />
         )}
         {headerComponent}
@@ -368,11 +369,11 @@ function ListImpl<ItemT>(
               )
             })}
         {onEndReached && !isEmpty && (
-          <Visibility
+          <EdgeVisibility
             root={disableFullWindowScroll ? nativeRef : null}
             onVisibleChange={onTailVisibilityChange}
             bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
-            key={data?.length}
+            containerRef={containerRef}
           />
         )}
         {footerComponent}
@@ -381,6 +382,34 @@ function ListImpl<ItemT>(
   )
 }
 
+function EdgeVisibility({
+  root,
+  topMargin,
+  bottomMargin,
+  containerRef,
+  onVisibleChange,
+}: {
+  root?: React.RefObject<HTMLDivElement> | null
+  topMargin?: string
+  bottomMargin?: string
+  containerRef: React.RefObject<Element>
+  onVisibleChange: (isVisible: boolean) => void
+}) {
+  const [containerHeight, setContainerHeight] = React.useState(0)
+  useResizeObserver(containerRef, (w, h) => {
+    setContainerHeight(h)
+  })
+  return (
+    <Visibility
+      key={containerHeight}
+      root={root}
+      topMargin={topMargin}
+      bottomMargin={bottomMargin}
+      onVisibleChange={onVisibleChange}
+    />
+  )
+}
+
 function useResizeObserver(
   ref: React.RefObject<Element>,
   onResize: undefined | ((w: number, h: number) => void),