forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Web] Retrigger onEndReached if needed when content height changes (#4859)
* Extract EdgeVisibility
* Key Visibility by container height instead of item count
+32
-3
+32
-3
src/view/com/util/List.web.tsx
+32
-3
src/view/com/util/List.web.tsx
···
344
344
style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
345
345
/>
346
346
{onStartReached && !isEmpty && (
347
-
<Visibility
347
+
<EdgeVisibility
348
348
root={disableFullWindowScroll ? nativeRef : null}
349
349
onVisibleChange={onHeadVisibilityChange}
350
350
topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
351
+
containerRef={containerRef}
351
352
/>
352
353
)}
353
354
{headerComponent}
···
368
369
)
369
370
})}
370
371
{onEndReached && !isEmpty && (
371
-
<Visibility
372
+
<EdgeVisibility
372
373
root={disableFullWindowScroll ? nativeRef : null}
373
374
onVisibleChange={onTailVisibilityChange}
374
375
bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
375
-
key={data?.length}
376
+
containerRef={containerRef}
376
377
/>
377
378
)}
378
379
{footerComponent}
379
380
</View>
380
381
</View>
382
+
)
383
+
}
384
+
385
+
function EdgeVisibility({
386
+
root,
387
+
topMargin,
388
+
bottomMargin,
389
+
containerRef,
390
+
onVisibleChange,
391
+
}: {
392
+
root?: React.RefObject<HTMLDivElement> | null
393
+
topMargin?: string
394
+
bottomMargin?: string
395
+
containerRef: React.RefObject<Element>
396
+
onVisibleChange: (isVisible: boolean) => void
397
+
}) {
398
+
const [containerHeight, setContainerHeight] = React.useState(0)
399
+
useResizeObserver(containerRef, (w, h) => {
400
+
setContainerHeight(h)
401
+
})
402
+
return (
403
+
<Visibility
404
+
key={containerHeight}
405
+
root={root}
406
+
topMargin={topMargin}
407
+
bottomMargin={bottomMargin}
408
+
onVisibleChange={onVisibleChange}
409
+
/>
381
410
)
382
411
}
383
412