feat(react): add experimental DelaySuspense in v1.8.1

packages/react-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suspensive/react-query",
-  "version": "1.7.4",
+  "version": "1.8.1",
   "keywords": [
     "suspensive",
     "react-query"
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@suspensive/babel": "workspace:^",
-    "@suspensive/react": "workspace:^1.7.4",
+    "@suspensive/react": "workspace:^1.8.1",
     "@suspensive/rollup": "workspace:^",
     "@suspensive/tsconfig": "workspace:^",
     "@tanstack/react-query": "^4.16.1",
@@ -50,7 +50,7 @@
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
-    "@suspensive/react": "^1.7.4",
+    "@suspensive/react": "^1.8.1",
     "@tanstack/react-query": "^4.16.1",
     "react": "^16.8 || ^17 || ^18"
   },

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suspensive/react",
-  "version": "1.7.4",
+  "version": "1.8.1",
   "keywords": [
     "suspensive",
     "react"

packages/react/src/AsyncBoundary.tsx

@@ -2,7 +2,6 @@ import { ComponentProps, ComponentRef, ComponentType, forwardRef } from 'react'
 import { ErrorBoundary } from './ErrorBoundary'
 import { Suspense } from './Suspense'
 import { ComponentPropsWithoutChildren } from './types'
-import { isDevelopment } from './utils'
 
 type SuspenseProps = ComponentProps<typeof Suspense>
 type ErrorBoundaryProps = ComponentProps<typeof ErrorBoundary>
@@ -19,7 +18,7 @@ const BaseAsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, AsyncBo
     </ErrorBoundary>
   )
 )
-if (isDevelopment) {
+if (process.env.NODE_ENV !== 'production') {
   BaseAsyncBoundary.displayName = 'AsyncBoundary'
 }
 const CSROnlyAsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, AsyncBoundaryProps>(
@@ -29,7 +28,7 @@ const CSROnlyAsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, Asyn
     </ErrorBoundary>
   )
 )
-if (isDevelopment) {
+if (process.env.NODE_ENV !== 'production') {
   CSROnlyAsyncBoundary.displayName = 'AsyncBoundary.CSROnly'
 }
 
@@ -56,7 +55,7 @@ export const withAsyncBoundary = <Props extends Record<string, unknown> = Record
     </AsyncBoundary>
   )
 
-  if (isDevelopment) {
+  if (process.env.NODE_ENV !== 'production') {
     const name = Component.displayName || Component.name || 'Component'
     Wrapped.displayName = `withAsyncBoundary(${name})`
   }
@@ -73,7 +72,7 @@ withAsyncBoundary.CSROnly = <Props extends Record<string, unknown> = Record<stri
     </AsyncBoundary.CSROnly>
   )
 
-  if (isDevelopment) {
+  if (process.env.NODE_ENV !== 'production') {
     const name = Component.displayName || Component.name || 'Component'
     Wrapped.displayName = `withAsyncBoundary.CSROnly(${name})`
   }

packages/react/src/DelaySuspense.tsx

@@ -0,0 +1,79 @@
+import { ComponentProps, ComponentType, useEffect, useState } from 'react'
+import { Suspense } from './Suspense'
+import { ComponentPropsWithoutChildren } from './types'
+
+type DelaySuspenseProps = ComponentProps<typeof Suspense> & {
+  ms?: number
+}
+
+const DefaultDelaySuspense = (props: DelaySuspenseProps) => (
+  <Suspense {...props} fallback={<Delay ms={props.ms}>{props.fallback}</Delay>} />
+)
+if (process.env.NODE_ENV !== 'production') {
+  DefaultDelaySuspense.displayName = 'DelaySuspense'
+}
+const CSROnlyDelaySuspense = (props: DelaySuspenseProps) => (
+  <Suspense.CSROnly {...props} fallback={<Delay ms={props.ms}>{props.fallback}</Delay>} />
+)
+if (process.env.NODE_ENV !== 'production') {
+  CSROnlyDelaySuspense.displayName = 'DelaySuspense.CSROnly'
+}
+
+const Delay = ({ ms = 0, children }: Pick<DelaySuspenseProps, 'ms'> & { children: DelaySuspenseProps['fallback'] }) => {
+  const [isDelayed, setIsDelayed] = useState(ms === 0)
+
+  useEffect(() => {
+    const timerId = setTimeout(() => !isDelayed && setIsDelayed(true), ms)
+    return () => clearTimeout(timerId)
+  }, [])
+
+  return <>{isDelayed ? children : null}</>
+}
+
+/**
+ * This component can accept delay time(ms) as prop to prevent to show fallback directly when children is suspended
+ * @experimental This component can be renamed itself or be merged to default Suspense of suspensive/react.
+ */
+export const DelaySuspense = DefaultDelaySuspense as typeof DefaultDelaySuspense & {
+  /**
+   * CSROnly mode make DelaySuspense can be used in SSR framework like Next.js with React 17 or under
+   * @experimental This component can be renamed itself or be merged to default Suspense of suspensive/react.
+   */
+  CSROnly: typeof CSROnlyDelaySuspense
+}
+DelaySuspense.CSROnly = CSROnlyDelaySuspense
+
+export function withDelaySuspense<Props extends Record<string, unknown> = Record<string, never>>(
+  Component: ComponentType<Props>,
+  suspenseProps?: ComponentPropsWithoutChildren<typeof DelaySuspense>
+) {
+  const Wrapped = (props: Props) => (
+    <DelaySuspense {...suspenseProps}>
+      <Component {...props} />
+    </DelaySuspense>
+  )
+
+  if (process.env.NODE_ENV !== 'production') {
+    const name = Component.displayName || Component.name || 'Component'
+    Wrapped.displayName = `withDelaySuspense(${name})`
+  }
+
+  return Wrapped
+}
+
+withDelaySuspense.CSROnly = function withDelaySuspenseCSROnly<
+  Props extends Record<string, unknown> = Record<string, never>
+>(Component: ComponentType<Props>, suspenseProps?: ComponentPropsWithoutChildren<typeof DelaySuspense.CSROnly>) {
+  const Wrapped = (props: Props) => (
+    <DelaySuspense.CSROnly {...suspenseProps}>
+      <Component {...props} />
+    </DelaySuspense.CSROnly>
+  )
+
+  if (process.env.NODE_ENV !== 'production') {
+    const name = Component.displayName || Component.name || 'Component'
+    Wrapped.displayName = `withDelaySuspense.CSROnly(${name})`
+  }
+
+  return Wrapped
+}

packages/react/src/ErrorBoundary.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react'
 import { ErrorBoundaryGroupContext } from './ErrorBoundaryGroup'
 import { ComponentPropsWithoutChildren } from './types'
-import { isDevelopment, isDifferentArray } from './utils'
+import { isDifferentArray } from './utils'
 
 type ErrorBoundaryProps = PropsWithRef<
   PropsWithChildren<{
@@ -123,7 +123,7 @@ export const ErrorBoundary = forwardRef<{ reset(): void }, ComponentPropsWithout
     return <BaseErrorBoundary {...props} resetKeys={resetKeys} ref={ref} />
   }
 )
-if (isDevelopment) {
+if (process.env.NODE_ENV !== 'production') {
   ErrorBoundary.displayName = 'ErrorBoundary'
 }
 
@@ -137,7 +137,7 @@ export const withErrorBoundary = <Props extends Record<string, unknown> = Record
     </ErrorBoundary>
   )
 
-  if (isDevelopment) {
+  if (process.env.NODE_ENV !== 'production') {
     const name = Component.displayName || Component.name || 'Component'
     Wrapped.displayName = `withErrorBoundary(${name})`
   }

packages/react/src/ErrorBoundaryGroup.tsx

@@ -1,10 +1,9 @@
 import { ComponentType, ReactNode, createContext, useContext, useEffect, useMemo } from 'react'
 import { useIsMounted, useKey } from './hooks'
 import { ComponentPropsWithoutChildren } from './types'
-import { isDevelopment } from './utils'
 
 export const ErrorBoundaryGroupContext = createContext({ resetKey: 0, reset: () => {} })
-if (isDevelopment) {
+if (process.env.NODE_ENV !== 'production') {
   ErrorBoundaryGroupContext.displayName = 'ErrorBoundaryGroupContext'
 }
 
@@ -81,7 +80,7 @@ export const withErrorBoundaryGroup = <Props extends Record<string, unknown> = R
     </ErrorBoundaryGroup>
   )
 
-  if (isDevelopment) {
+  if (process.env.NODE_ENV !== 'production') {
     const name = Component.displayName || Component.name || 'Component'
     Wrapped.displayName = `withErrorBoundaryGroup(${name})`
   }

packages/react/src/Suspense.tsx

@@ -1,14 +1,13 @@
 import { Suspense as BaseSuspense, ComponentType, SuspenseProps } from 'react'
 import { useIsMounted } from './hooks'
 import { ComponentPropsWithoutChildren } from './types'
-import { isDevelopment } from './utils'
 
 const DefaultSuspense = (props: SuspenseProps) => <BaseSuspense {...props} />
-if (isDevelopment) {
+if (process.env.NODE_ENV !== 'production') {
   DefaultSuspense.displayName = 'Suspense'
 }
 const CSROnlySuspense = (props: SuspenseProps) => (useIsMounted() ? <BaseSuspense {...props} /> : <>{props.fallback}</>)
-if (isDevelopment) {
+if (process.env.NODE_ENV !== 'production') {
   CSROnlySuspense.displayName = 'Suspense.CSROnly'
 }
 
@@ -35,7 +34,7 @@ export function withSuspense<Props extends Record<string, unknown> = Record<stri
     </Suspense>
   )
 
-  if (isDevelopment) {
+  if (process.env.NODE_ENV !== 'production') {
     const name = Component.displayName || Component.name || 'Component'
     Wrapped.displayName = `withSuspense(${name})`
   }
@@ -53,7 +52,7 @@ withSuspense.CSROnly = function withSuspenseCSROnly<Props extends Record<string,
     </Suspense.CSROnly>
   )
 
-  if (isDevelopment) {
+  if (process.env.NODE_ENV !== 'production') {
     const name = Component.displayName || Component.name || 'Component'
     Wrapped.displayName = `withSuspense.CSROnly(${name})`
   }

packages/react/src/index.ts

@@ -2,3 +2,4 @@ export { AsyncBoundary, withAsyncBoundary } from './AsyncBoundary'
 export { Suspense, withSuspense } from './Suspense'
 export { ErrorBoundary, withErrorBoundary } from './ErrorBoundary'
 export { ErrorBoundaryGroup, useErrorBoundaryGroup, withErrorBoundaryGroup } from './ErrorBoundaryGroup'
+export { DelaySuspense, withDelaySuspense } from './DelaySuspense'

packages/react/src/utils/index.ts

@@ -1,2 +1 @@
 export { default as isDifferentArray } from './isDifferentArray'
-export { default as isDevelopment } from './isDevelopment'

websites/visualization/components/forPlayground/api.tsx

@@ -2,14 +2,14 @@ import axios from 'axios'
 
 const delay = (ms: number = 1000) => new Promise((resolve) => setTimeout(resolve, ms))
 
-type Post = { id: number; title: string; body: string; userId: number }
-type Album = { id: number; title: string; userId: number }
-type Todo = { id: number; title: string; completed: boolean; userId: number }
+export type Post = { id: number; title: string; body: string; userId: number }
+export type Album = { id: number; title: string; userId: number }
+export type Todo = { id: number; title: string; completed: boolean; userId: number }
 
 export const posts = {
   getMany: async () => {
-    await delay()
-    return axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts').then(({ data }) => data.splice(0, 5))
+    await delay(Math.random() * 2000)
+    return axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts').then(({ data }) => data)
   },
   getOneBy: async ({ id }: { id: Post['id'] }) => {
     await delay(Math.random() * 3000)

websites/visualization/components/forPlayground/suspensive.tsx

@@ -1,26 +1,46 @@
 import { Suspense } from '@suspensive/react'
 import { useSuspenseQuery } from '@suspensive/react-query'
-import { albums, posts, todos } from './api'
+import { albums, Post, posts, todos } from './api'
 import { Spinner } from '../uis'
+import { useIntersectionObserver } from './useIntersectionObserver'
+import { useEffect, useRef, useState } from 'react'
 
 export const PostListSuspensive = () => {
   const postsQuery = useSuspenseQuery(['posts'], posts.getMany)
 
   return (
     <ul style={{ maxWidth: 600 }}>
       {postsQuery.data.map((post) => (
-        <li key={post.id}>
-          <h3>Title: {post.title}</h3>
-          <Suspense.CSROnly fallback={<Spinner />}>
-            <Post id={post.id} />
-          </Suspense.CSROnly>
-        </li>
+        <PostListItem key={post.id} post={post} />
       ))}
     </ul>
   )
 }
 
-export const Post = ({ id }: { id: number }) => {
+const PostListItem = ({ post }: { post: Post }) => {
+  const ref = useRef(null)
+  const entry = useIntersectionObserver(ref)
+  const [isShow, setIsShow] = useState(false)
+
+  useEffect(() => {
+    if (entry?.isIntersecting) {
+      setIsShow(true)
+    }
+  }, [entry?.isIntersecting])
+
+  return (
+    <li key={post.id} ref={ref} style={{ minHeight: 200 }}>
+      <h3>Title: {post.title}</h3>
+      {isShow && (
+        <Suspense.CSROnly fallback={<Spinner />}>
+          <PostContent id={post.id} />
+        </Suspense.CSROnly>
+      )}
+    </li>
+  )
+}
+
+const PostContent = ({ id }: { id: number }) => {
   const postQuery = useSuspenseQuery(['posts', id], () => posts.getOneBy({ id }))
   const albumsQuery = useSuspenseQuery(['users', postQuery.data.userId, 'albums'], () =>
     albums.getManyBy({ userId: postQuery.data.userId })

websites/visualization/components/forPlayground/tanstack.tsx

@@ -1,6 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
-import { albums, posts, todos } from './api'
+import { albums, Post, posts, todos } from './api'
 import { Spinner } from '../uis'
+import { useEffect, useRef, useState } from 'react'
+import { useIntersectionObserver } from './useIntersectionObserver'
 
 export const PostListTanStack = () => {
   const postsQuery = useQuery(['posts'], posts.getMany)
@@ -15,16 +17,32 @@ export const PostListTanStack = () => {
   return (
     <ul style={{ maxWidth: 600 }}>
       {postsQuery.data.map((post) => (
-        <li key={post.id}>
-          <h3>Title: {post.title}</h3>
-          <Post id={post.id} />
-        </li>
+        <PostListItem key={post.id} post={post} />
       ))}
     </ul>
   )
 }
 
-export const Post = ({ id }: { id: number }) => {
+const PostListItem = ({ post }: { post: Post }) => {
+  const ref = useRef(null)
+  const entry = useIntersectionObserver(ref)
+  const [isShow, setIsShow] = useState(false)
+
+  useEffect(() => {
+    if (entry?.isIntersecting) {
+      setIsShow(true)
+    }
+  }, [entry?.isIntersecting])
+
+  return (
+    <li key={post.id} ref={ref} style={{ minHeight: 200 }}>
+      <h3>Title: {post.title}</h3>
+      {isShow && <PostContent id={post.id} />}
+    </li>
+  )
+}
+
+const PostContent = ({ id }: { id: number }) => {
   const postQuery = useQuery(['posts', id], () => posts.getOneBy({ id }))
   const albumsQuery = useQuery(
     ['users', postQuery.data?.userId, 'albums'],