Skip to content

Commit 6b9f815

Browse files
ntuckerntucker
committed
docs: Add AsyncBoundary modal example; share examples across pages
1 parent a7463df commit 6b9f815

File tree

4 files changed

+123
-93
lines changed

4 files changed

+123
-93
lines changed

‎docs/core/api/AsyncBoundary.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ description: Handles loading and error conditions of Suspense.
88
<meta name="docsearch:pagerank" content="20"/>
99
</head>
1010

11+
import AsyncBoundaryExamples from '../shared/\_AsyncBoundary.mdx';
12+
13+
1114
# &lt;AsyncBoundary />
1215

1316
Handles loading and error conditions of Suspense.
@@ -24,18 +27,13 @@ Learn more about boundary placement by learning how to [co-locate data dependenc
2427

2528
Place `AsyncBoundary` [at or above navigational boundaries](../getting-started/data-dependency.md#boundaries) like **pages, routes, or modals**.
2629

27-
```tsx
28-
import React from 'react';
29-
import { AsyncBoundary } from '@data-client/react';
30+
<AsyncBoundaryExamples />
3031

31-
export default function MyPage() {
32-
return (
33-
<AsyncBoundary>
34-
<SuspendingComponent />
35-
</AsyncBoundary>
36-
);
37-
}
32+
Then [useSuspense()](./useSuspense.md) in the components that render the data. Any errors or loading state
33+
from *any* descendant of the `<AsyncBoundary />` will be rendered at the `<AsyncBoundary />`. This consolidation
34+
of fallback UI improves performance and usability.
3835

36+
```ts
3937
function SuspendingComponent() {
4038
const data = useSuspense(getMyThing);
4139

‎docs/core/getting-started/data-dependency.md‎

Lines changed: 2 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,13 @@ sidebar_label: Render Data
99

1010
import ThemedImage from '@theme/ThemedImage';
1111
import useBaseUrl from '@docusaurus/useBaseUrl';
12-
import Tabs from '@theme/Tabs';
13-
import TabItem from '@theme/TabItem';
1412
import LanguageTabs from '@site/src/components/LanguageTabs';
1513
import HooksPlayground from '@site/src/components/HooksPlayground';
1614
import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
1715
import { postFixtures } from '@site/src/fixtures/posts';
1816
import { detailFixtures, listFixtures } from '@site/src/fixtures/profiles';
1917
import UseLive from '../shared/\_useLive.mdx';
18+
import AsyncBoundaryExamples from '../shared/\_AsyncBoundary.mdx';
2019

2120
# Rendering Asynchronous Data
2221

@@ -208,86 +207,7 @@ us to make error/loading disjoint from data usage.
208207
Instead we place [&lt;AsyncBoundary /\>](../api/AsyncBoundary.md) to handling loading and error conditions at or above navigational boundaries like **pages,
209208
routes, or [modals](https://www.appcues.com/blog/modal-dialog-windows)**.
210209

211-
<Tabs
212-
defaultValue="web"
213-
groupId="platform"
214-
values={[
215-
{ label: 'React Router', value: 'web' },
216-
{ label: 'NextJS', value: 'nextjs' },
217-
{ label: 'Expo', value: 'expo' },
218-
]}>
219-
220-
<TabItem value="web">
221-
222-
```tsx {9,11} title="Dashboard.tsx"
223-
import { AsyncBoundary } from '@data-client/react';
224-
import { Outlet } from 'react-router';
225-
226-
export default function Dashboard() {
227-
return (
228-
<div>
229-
<h1>Dashboard</h1>
230-
<section>
231-
<AsyncBoundary>
232-
<Outlet />
233-
</AsyncBoundary>
234-
</section>
235-
</div>
236-
);
237-
}
238-
```
239-
240-
</TabItem>
241-
<TabItem value="nextjs">
242-
243-
```tsx {12} title="app/dashboard/layout.tsx"
244-
import { AsyncBoundary } from '@data-client/react';
245-
246-
export default function DashboardLayout({
247-
children,
248-
}: {
249-
children: React.ReactNode;
250-
}) {
251-
return (
252-
<div>
253-
<h1>Dashboard</h1>
254-
<section>
255-
<AsyncBoundary>{children}</AsyncBoundary>
256-
</section>
257-
</div>
258-
);
259-
}
260-
```
261-
262-
</TabItem>
263-
<TabItem value="expo">
264-
265-
```tsx {15,17} title="app/dashboard/_layout.tsx"
266-
import { AsyncBoundary } from '@data-client/react';
267-
import { Slot } from 'expo-router';
268-
269-
export default function DashboardLayout() {
270-
return (
271-
<ParallaxScrollView
272-
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
273-
headerImage={
274-
<Image
275-
source={require('@/assets/images/my-logo.png')}
276-
style={styles.logo}
277-
/>
278-
}
279-
>
280-
<AsyncBoundary>
281-
<Slot />
282-
</AsyncBoundary>
283-
</ParallaxScrollView>
284-
);
285-
}
286-
```
287-
288-
</TabItem>
289-
290-
</Tabs>
210+
<AsyncBoundaryExamples />
291211

292212
React 18's [useTransition](https://react.dev/reference/react/useTransition) and [Server Side Rendering](../guides/ssr.md)
293213
powered routers or navigation means never seeing a loading fallback again. In React 16 and 17 fallbacks can be centralized

‎docs/core/shared/_AsyncBoundary.mdx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import Tabs from '@theme/Tabs';
2+
import TabItem from '@theme/TabItem';
3+
4+
<Tabs
5+
defaultValue="web"
6+
groupId="platform"
7+
values={[
8+
{ label: 'React Router', value: 'web' },
9+
{ label: 'NextJS', value: 'nextjs' },
10+
{ label: 'Expo', value: 'expo' },
11+
{ label: 'Antd Modal', value: 'antd' },
12+
]}>
13+
14+
<TabItem value="web">
15+
16+
```tsx {9,11} title="Dashboard.tsx"
17+
import { AsyncBoundary } from '@data-client/react';
18+
import { Outlet } from 'react-router';
19+
20+
export default function Dashboard() {
21+
return (
22+
<div>
23+
<h1>Dashboard</h1>
24+
<section>
25+
<AsyncBoundary>
26+
<Outlet />
27+
</AsyncBoundary>
28+
</section>
29+
</div>
30+
);
31+
}
32+
```
33+
34+
</TabItem>
35+
<TabItem value="nextjs">
36+
37+
```tsx {12} title="app/dashboard/layout.tsx"
38+
import { AsyncBoundary } from '@data-client/react';
39+
40+
export default function DashboardLayout({
41+
children,
42+
}: {
43+
children: React.ReactNode;
44+
}) {
45+
return (
46+
<div>
47+
<h1>Dashboard</h1>
48+
<section>
49+
<AsyncBoundary>{children}</AsyncBoundary>
50+
</section>
51+
</div>
52+
);
53+
}
54+
```
55+
56+
</TabItem>
57+
<TabItem value="expo">
58+
59+
```tsx {15,17} title="app/dashboard/_layout.tsx"
60+
import { AsyncBoundary } from '@data-client/react';
61+
import { Slot } from 'expo-router';
62+
63+
export default function DashboardLayout() {
64+
return (
65+
<ParallaxScrollView
66+
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
67+
headerImage={
68+
<Image
69+
source={require('@/assets/images/my-logo.png')}
70+
style={styles.logo}
71+
/>
72+
}
73+
>
74+
<AsyncBoundary>
75+
<Slot />
76+
</AsyncBoundary>
77+
</ParallaxScrollView>
78+
);
79+
}
80+
```
81+
82+
</TabItem>
83+
84+
<TabItem value="antd">
85+
86+
```tsx title="ModalOpen.tsx"
87+
import { AsyncBoundary } from '@data-client/react';
88+
import { Button, Modal } from 'antd';
89+
90+
export default function ModalOpen() {
91+
return (
92+
<>
93+
<Button type="primary" onClick={showModal}>
94+
Open Modal
95+
</Button>
96+
<Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
97+
// highlight-next-line
98+
<AsyncBoundary>
99+
<MyModalBody />
100+
// highlight-next-line
101+
</AsyncBoundary>
102+
</Modal>
103+
</>
104+
);
105+
}
106+
```
107+
108+
</TabItem>
109+
110+
</Tabs>

‎website/src/components/DiffEditorMonaco.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import BrowserOnly from '@docusaurus/BrowserOnly';
22
import { DiffEditor as BaseDiffEditor } from '@monaco-editor/react';
33
import clsx from 'clsx';
4+
import { type editor } from 'monaco-editor';
45
import { useMemo } from 'react';
56

67
import { extensionToMonacoLanguage } from './Playground/extensionToMonacoLanguage';
@@ -70,7 +71,7 @@ export type DiffMonacoProps = {
7071
}[];
7172
};
7273

73-
const DIFF_OPTIONS = {
74+
const DIFF_OPTIONS: editor.IDiffEditorConstructionOptions = {
7475
...options,
7576
renderSideBySide: true,
7677
renderOverviewRuler: false,
@@ -80,4 +81,5 @@ const DIFF_OPTIONS = {
8081
useInlineViewWhenSpaceIsLimited: false,
8182
enableSplitViewResizing: false,
8283
readOnly: true,
84+
compactMode: true,
8385
};

0 commit comments

Comments
 (0)