Open manudeli opened 1 month ago
const posts = useSuspenseQuery(postsQueryOptions(...))
return posts.map((post) => (
<Suspense intersection fallback={({ intersectionRef }) => <Skeleton ref={intersectionRef} />}>
<SuspenseQuery {postQueryOptions(post.id)}>
{(post) => <Post {...post} />}
</SuspenseQuery>
</Suspense>
)
)
@gwansikk @kangju2000 @bigsaigon333 This could be new intersection prop of Suspense to lazy load??
const posts = useSuspenseQuery(postsQueryOptions(...)) return posts.map((post) => ( <Suspense intersection fallback={({ intersectionRef }) => <Skeleton ref={intersectionRef} />}> <SuspenseQuery {postQueryOptions(post.id)}> {(post) => <Post {...post} />} </SuspenseQuery> </Suspense> ) )
@gwansikk @kangju2000 @bigsaigon333 This could be new intersection prop of Suspense to lazy load??
Oh, that's a great idea! It seems useful for gradually loading the necessary data for users through lazy loading
How about this interface ?
const posts = useSuspenseQuery(postsQueryOptions(...))
<Suspense when="intersectionObserve"></Suspense>
<Suspense when="render"></Suspense> // default
<Suspense triggerBy="intersectionObserve"></Suspense>
<Suspense triggerBy="render"></Suspense> // default
I think the intersection
prop is too much of an abstraction.
What you want to do is determine the moment that creates the suspense, so I'm thinking of something like a trigger
or a when
.
However, I think Intersection Observe should have more options.
For example,
I thought, "How do I set these options?"
const posts = useSuspenseQuery({
...otherOptions,
observeRef: ref
})
return <div ref={ref}
How about this approach:
if we get a ref, we'll treat it like an enable
, and it'll work then, so the user doesn't have to know about the intersection observe api.
We should support react-native and web at once too!
<InView>
{(trigger) => (
<div ref={trigger.ref}>
<Suspense enabled={trigger.isInView} fallback={<Spinner/>}>
<SuspensQuery />
</Suspense>
</div>
)}
</InView>
<InView>
{(target) => (
<div ref={target.ref}>
<Suspense fallback={<Spinner/>}>
{target.isInView ? <SuspensQuery/> : <SuspenseAllTime/>}
</Suspense>
</div>
)}
</InView>
Package Scope
etc
Description
@suspensive/intersection to trigger fetch on view inside of window
Possible Solution
etc.
No response