[Feature]: <FadeIn/> supporting react-dom, react-native

[manudeli]

Package Scope

etc

Description

const PostsPage = () => {
  usePrefetchQuery(postsQueryOptions())

  const averageLoadingTimeQuery = useQuery({
    queryKey: ['averageLoadingTime'],
    queryFn: api.averageLoadingTime,
    placeholderData: 200, // If don't know the average API loading time yet, treat 200ms as the default value.
  })

  return (
    <Suspense
      fallback={
        // After delaying loadingTimeQuery.data, skeleton FadeIn for 300ms
        <FadeIn delay={loadingTimeQuery.data} ms={300}>
          <PostListSkeleton />
        </FadeIn>
      }
    >
      <SuspenseQuery {...postsQueryOptions()}>
        {({ data: posts }) => posts.map((post) => <Post key={post.id} {...post} />)}
      </SuspenseQuery>
    </Suspense>
  )
}

Possible Solution

No response

etc.

No response

[manudeli]

This is next plan

[coauthors[bot]]

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@manudeli	https://github.com/toss/suspensive/issues/1109#issuecomment-2333632913 https://github.com/toss/suspensive/issues/1109	2	Co-authored-by: manudeli <[email protected]>