From 8c5844bfa64c952d126ca1465299e920a906b505 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Fri, 31 May 2024 23:34:39 +0900
Subject: [PATCH] fix(react): return type of Delay should be JSX.Element (#898)

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

same reason with previous PRs

## 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/honest-peas-wink.md      |  5 +++++
 packages/react/src/Delay.test-d.tsx | 17 +++++++++++++++++
 packages/react/src/Delay.tsx        |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/honest-peas-wink.md
 create mode 100644 packages/react/src/Delay.test-d.tsx

diff --git a/.changeset/honest-peas-wink.md b/.changeset/honest-peas-wink.md
new file mode 100644
index 000000000..0d9b26cb6
--- /dev/null
+++ b/.changeset/honest-peas-wink.md
@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+fix(react): return type of Delay should be JSX.Element
diff --git a/packages/react/src/Delay.test-d.tsx b/packages/react/src/Delay.test-d.tsx
new file mode 100644
index 000000000..fde8df14d
--- /dev/null
+++ b/packages/react/src/Delay.test-d.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+import { Delay } from './Delay'
+
+describe('<Delay/>', () => {
+  it('type check', () => {
+    expectTypeOf(
+      <Delay>
+        <></>
+      </Delay>
+    ).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(
+      <Delay>
+        <></>
+      </Delay>
+    ).not.toEqualTypeOf<ReactNode>()
+  })
+})
diff --git a/packages/react/src/Delay.tsx b/packages/react/src/Delay.tsx
index 10125c35f..7173dc938 100644
--- a/packages/react/src/Delay.tsx
+++ b/packages/react/src/Delay.tsx
@@ -21,7 +21,7 @@ export const Delay = (props: DelayProps) => {
   useTimeout(() => setIsDelaying(false), ms)
 
   const fallback = typeof props.fallback === 'undefined' ? defaultProps.fallback : props.fallback
-  return isDelaying ? fallback : props.children
+  return <>{isDelaying ? fallback : props.children}</>
 }
 if (process.env.NODE_ENV === 'development') {
   Delay.displayName = 'Delay'