From b05b4e218fea97676ed837548a77915aed065037 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Sun, 8 Oct 2023 00:27:55 +0900
Subject: [PATCH] docs(react): update doc for Delay (#198)

* docs(react): update doc for Delay

* docs: update

* Create orange-pants-vanish.md
---
 .changeset/orange-pants-vanish.md |  5 +++
 packages/react/src/Delay.en.mdx   | 53 +++++++++++++++++++++++++++++--
 packages/react/src/Delay.ko.mdx   | 53 +++++++++++++++++++++++++++++--
 3 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/orange-pants-vanish.md

diff --git a/.changeset/orange-pants-vanish.md b/.changeset/orange-pants-vanish.md
new file mode 100644
index 000000000..81b7f72e0
--- /dev/null
+++ b/.changeset/orange-pants-vanish.md
@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+docs(react): update doc for Delay
diff --git a/packages/react/src/Delay.en.mdx b/packages/react/src/Delay.en.mdx
index 4cc1b140c..0cd864c5a 100644
--- a/packages/react/src/Delay.en.mdx
+++ b/packages/react/src/Delay.en.mdx
@@ -3,14 +3,63 @@ sidebar_position: 5
 title: <Delay/>
 ---
 
-This component delays when children are exposed.
+### props.ms
+
+This component delays the exposure of children by ms. In the code below, exposure of children is delayed by 200ms.
 
 ```tsx
 import { Delay } from '@suspensive/react'
 
 const Example = () => (
-  <Delay ms={2000}>
+  <Delay ms={200}>
     <Delayed />
   </Delay>
 )
 ```
+
+:::info
+
+#### Delayed loading UI sometimes provides better usability
+
+```tsx
+import { Delay, Suspense } from '@suspensive/react'
+
+const Example = () => (
+  <Suspense
+    fallback={
+      <Delay ms={200}>
+        <Skeleton />
+      </Delay>
+    }
+  >
+    ...
+  </Suspense>
+)
+```
+
+:::
+
+:::tip
+
+### Default ms
+
+`<Delay/>` are more powerful when used with `<SuspensiveProvider/>`. Control multiple `<Delay/>`s default ms with `<SuspensiveProvider/>`. Details are introduced in [`<SuspensiveProvider/>` page](./SuspensiveProvider.i18n).
+
+:::
+
+## withDelay
+
+We can use withDelay to wrap component by `<Delay/>` easily.
+we don't need to make unncessary code to wrap it if we use withDelay like below.
+withDelay's 2nd parameter is props of `<Delay/>` without children
+
+```tsx
+import { withDelay } from '@suspensive/react'
+
+const Example = withDelay(
+  function Component() {
+    return <>...</>
+  },
+  { ms: 200 }
+)
+```
diff --git a/packages/react/src/Delay.ko.mdx b/packages/react/src/Delay.ko.mdx
index 92a0dd233..52a4c4928 100644
--- a/packages/react/src/Delay.ko.mdx
+++ b/packages/react/src/Delay.ko.mdx
@@ -3,14 +3,63 @@ sidebar_position: 5
 title: <Delay/>
 ---
 
-이 컴포넌트는 children이 노출되는 시점을 지연시킵니다.
+### props.ms
+
+이 컴포넌트는 children이 노출되는 시점을 ms만큼 지연시킵니다. 아래와 같은 코드에서는 200ms만큼 children 노출이 지연됩니다.
 
 ```tsx
 import { Delay } from '@suspensive/react'
 
 const Example = () => (
-  <Delay ms={2000}>
+  <Delay ms={200}>
     <Delayed />
   </Delay>
 )
 ```
+
+:::info
+
+#### 로딩 UI가 지연되어 노출되는 것이 때에 따라 더 좋은 사용성을 제공합니다
+
+```tsx
+import { Delay, Suspense } from '@suspensive/react'
+
+const Example = () => (
+  <Suspense
+    fallback={
+      <Delay ms={200}>
+        <Skeleton />
+      </Delay>
+    }
+  >
+    ...
+  </Suspense>
+)
+```
+
+:::
+
+:::tip
+
+### Default ms
+
+`<Delay/>`는 `<SuspensiveProvider/>`와 함께 사용할 때 더욱 강력해집니다. `<SuspensiveProvider/>`를 사용하여 여러 `<Delay/>` default ms를 제어합니다. 자세한 내용은 [`<SuspensiveProvider/>` 페이지](./SuspensiveProvider.i18n)에 소개되어 있습니다.
+
+:::
+
+## withDelay
+
+withDelay를 사용하면 컴포넌트를 `<Delay/>`로 쉽게 래핑할 수 있습니다.
+아래와 같이 withDelay를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
+withDelay의 두 번째 인자는 children이 없는 `<Delay/>`의 props입니다.
+
+```tsx
+import { withDelay } from '@suspensive/react'
+
+const Example = withDelay(
+  function Component() {
+    return <>...</>
+  },
+  { ms: 200 }
+)
+```