fix(react): define default prop of each components(Delay, Suspense) (#…

…709)

# Overview

I was looking at the `Delay` component in `@suspensive/react` and it
seems that if we utilize the generic type of `PropsWithChildren`, we can
remove the unnecessary `OmitKeyOf` utility type.

```ts
type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };
```

Also, I added test code for the fallback of the Delay component. 

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

.changeset/swift-foxes-exist.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+fix(react): define default prop of each components

.changeset/wild-carpets-study.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+test(react): add test case for fallback prop of Delay

packages/react/src/Delay.spec.tsx

@@ -1,10 +1,19 @@
 import { CustomError, TEXT } from '@suspensive/test-utils'
 import { render, screen, waitFor } from '@testing-library/react'
 import ms from 'ms'
-import { describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Delay } from './Delay'
 import { Delay_ms_prop_should_be_greater_than_or_equal_to_0, SuspensiveError } from './models/SuspensiveError'
 
+beforeEach(() => {
+  vi.useFakeTimers({ shouldAdvanceTime: true })
+})
+
+afterEach(() => {
+  vi.runOnlyPendingTimers()
+  vi.useRealTimers()
+})
+
 describe('<Delay/>', () => {
   it('should render the children after the delay', async () => {
     render(<Delay ms={ms('0.1s')}>{TEXT}</Delay>)
@@ -16,9 +25,22 @@ describe('<Delay/>', () => {
     render(<Delay>{TEXT}</Delay>)
     expect(screen.queryByText(TEXT)).toBeInTheDocument()
   })
-  it('should accept 0 for ms prop', async () => {
+  it('should accept 0 for ms prop', () => {
     render(<Delay ms={0}>{TEXT}</Delay>)
-    await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument(), { timeout: 1000 })
+
+    expect(screen.queryByText(TEXT)).toBeInTheDocument()
+  })
+  it('should render fallback content initially and then the actual text after the delay', async () => {
+    render(
+      <Delay ms={ms('1s')} fallback={<p role="paragraph">fallback</p>}>
+        {TEXT}
+      </Delay>
+    )
+    expect(screen.queryByRole('paragraph')).toBeInTheDocument()
+
+    vi.advanceTimersByTime(ms('1s'))
+
+    await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
   })
   it('should throw SuspensiveError if negative number is passed as ms prop', () => {
     expect(() => render(<Delay ms={-1}>{TEXT}</Delay>)).toThrow(Delay_ms_prop_should_be_greater_than_or_equal_to_0)

packages/react/src/contexts/DefaultOptionsContexts.ts

@@ -4,6 +4,7 @@ import type { OmitKeyOf } from '../utility-types'
 
 export const DelayDefaultPropsContext = createContext<OmitKeyOf<DelayProps, 'children'>>({
   ms: undefined,
+  fallback: undefined,
 })
 if (process.env.NODE_ENV === 'development') {
   DelayDefaultPropsContext.displayName = 'DelayDefaultPropsContext'