Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[Web] Retrigger onEndReached if needed when content height changes (#4859)

* Extract EdgeVisibility

* Key Visibility by container height instead of item count

authored by

dan and committed by
GitHub
576cef88 c75bb65b

+32 -3
+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