Skip to content

Commit

Permalink
Update 'seen' to mean 3 seconds on-screen with some significant porti…
Browse files Browse the repository at this point in the history
…on visible
  • Loading branch information
pfrazee committed May 3, 2024
1 parent b392f68 commit cb798f5
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 7 deletions.
2 changes: 1 addition & 1 deletion src/view/com/util/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ function ListImpl<ItemT>(
},
{
itemVisiblePercentThreshold: 40,
minimumViewTime: 100,
minimumViewTime: 3e3,
},
]
}, [onItemSeen])
Expand Down
25 changes: 19 additions & 6 deletions src/view/com/util/List.web.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ export type ListProps<ItemT> = Omit<
}
export type ListRef = React.MutableRefObject<any | null> // TODO: Better types.

const ON_ITEM_SEEN_WAIT_DURATION = 3e3 // post must be "seen" 3 seconds before capturing
const ON_ITEM_SEEN_INTERSECTION_OPTS = {
rootMargin: '-200px 0px -200px 0px',
} // post must be 200px visible to be "seen"

function ListImpl<ItemT>(
{
ListHeaderComponent,
Expand Down Expand Up @@ -253,7 +258,7 @@ let Row = function RowImpl<ItemT>({
onItemSeen: ((item: any) => void) | undefined
}): React.ReactNode {
const rowRef = React.useRef(null)
const isIntersecting = React.useRef(false)
const intersectionTimeout = React.useRef<NodeJS.Timer | undefined>(undefined)

const handleIntersection = useNonReactiveCallback(
(entries: IntersectionObserverEntry[]) => {
Expand All @@ -262,10 +267,15 @@ let Row = function RowImpl<ItemT>({
return
}
entries.forEach(entry => {
if (entry.isIntersecting !== isIntersecting.current) {
isIntersecting.current = entry.isIntersecting
if (entry.isIntersecting) {
onItemSeen!(item)
if (entry.isIntersecting) {
if (!intersectionTimeout.current) {
intersectionTimeout.current = setTimeout(() => {
onItemSeen!(item)
}, ON_ITEM_SEEN_WAIT_DURATION)
}
} else {
if (intersectionTimeout.current) {
clearTimeout(intersectionTimeout.current)
}
}
})
Expand All @@ -277,7 +287,10 @@ let Row = function RowImpl<ItemT>({
if (!onItemSeen) {
return
}
const observer = new IntersectionObserver(handleIntersection)
const observer = new IntersectionObserver(
handleIntersection,
ON_ITEM_SEEN_INTERSECTION_OPTS,
)
const row: Element | null = rowRef.current!
observer.observe(row)
return () => {
Expand Down

0 comments on commit cb798f5

Please sign in to comment.