Skip to content

Commit 7617842

Browse files
aurorascharffaurorascharff
committed
Show browser-only fallback on reload
1 parent 2e6ade6 commit 7617842

3 files changed

Lines changed: 30 additions & 36 deletions

File tree

‎src/content/reference/react-dom/browser.md‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ Call `browser` inside `use` in a component that should only render in the browse
6969
7070
You can use this instead of checking `typeof window`, waiting for an [`Effect`](/reference/react/useEffect) to set mounted state, or using a framework option to disable server rendering.
7171
72-
Press **Load draft**. The initial HTML contains the loading fallback. After hydration, React displays the draft loaded from `localStorage`.
72+
Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`.
7373
7474
<Sandpack>
7575
@@ -104,9 +104,12 @@ function SavedDraft() {
104104

105105
export default function App() {
106106
return (
107-
<Suspense fallback={<p>Loading draft...</p>}>
108-
<SavedDraft />
109-
</Suspense>
107+
<>
108+
<h1>Saved draft</h1>
109+
<Suspense fallback={<p>Loading draft...</p>}>
110+
<SavedDraft />
111+
</Suspense>
112+
</>
110113
);
111114
}
112115
```
@@ -120,6 +123,7 @@ export default function Document() {
120123
<head>
121124
<title>Saved draft</title>
122125
<style>{`
126+
h1 { font-size: 24px; margin-top: 0; }
123127
label, textarea { display: block; }
124128
textarea { margin-top: 5px; }
125129
`}</style>
@@ -148,11 +152,7 @@ async function main(frame) {
148152
hydrateRoot(frame.contentDocument, <Document />);
149153
}
150154

151-
const renderButton = document.getElementById('render');
152-
renderButton.addEventListener('click', () => {
153-
renderButton.disabled = true;
154-
main(document.getElementById('preview'));
155-
}, { once: true });
155+
main(document.getElementById('preview'));
156156
```
157157
158158
```js src/demo-helpers.js hidden
@@ -182,8 +182,6 @@ export async function flushReadableStreamToFrame(readable, frame) {
182182
<title>Browser-only rendering</title>
183183
</head>
184184
<body>
185-
<button id="render">Load draft</button>
186-
<br /><br />
187185
<iframe id="preview" title="Rendered page"></iframe>
188186
</body>
189187
</html>
@@ -192,7 +190,7 @@ export async function flushReadableStreamToFrame(readable, frame) {
192190
```css src/styles.css hidden
193191
iframe {
194192
width: 100%;
195-
height: 120px;
193+
height: 160px;
196194
border: 0;
197195
}
198196
```

‎src/content/reference/react/Suspense.md‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2386,7 +2386,7 @@ The server HTML will include the loading indicator. It will be replaced by the `
23862386
23872387
A Suspense boundary can provide a fallback for a browser-only component. Wrap the component in `<Suspense>` and call [`use(browser())`](/reference/react/use#use-browser) inside it.
23882388
2389-
Press **Load draft**. The initial HTML contains the loading fallback. After hydration, React displays the draft loaded from `localStorage`.
2389+
Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`.
23902390
23912391
<Sandpack>
23922392
@@ -2421,9 +2421,12 @@ function SavedDraft() {
24212421

24222422
export default function App() {
24232423
return (
2424-
<Suspense fallback={<p>Loading draft...</p>}>
2425-
<SavedDraft />
2426-
</Suspense>
2424+
<>
2425+
<h1>Saved draft</h1>
2426+
<Suspense fallback={<p>Loading draft...</p>}>
2427+
<SavedDraft />
2428+
</Suspense>
2429+
</>
24272430
);
24282431
}
24292432
```
@@ -2437,6 +2440,7 @@ export default function Document() {
24372440
<head>
24382441
<title>Saved draft</title>
24392442
<style>{`
2443+
h1 { font-size: 24px; margin-top: 0; }
24402444
label, textarea { display: block; }
24412445
textarea { margin-top: 5px; }
24422446
`}</style>
@@ -2465,11 +2469,7 @@ async function main(frame) {
24652469
hydrateRoot(frame.contentDocument, <Document />);
24662470
}
24672471

2468-
const renderButton = document.getElementById('render');
2469-
renderButton.addEventListener('click', () => {
2470-
renderButton.disabled = true;
2471-
main(document.getElementById('preview'));
2472-
}, { once: true });
2472+
main(document.getElementById('preview'));
24732473
```
24742474
24752475
```js src/demo-helpers.js hidden
@@ -2499,8 +2499,6 @@ export async function flushReadableStreamToFrame(readable, frame) {
24992499
<title>Browser-only rendering</title>
25002500
</head>
25012501
<body>
2502-
<button id="render">Load draft</button>
2503-
<br /><br />
25042502
<iframe id="preview" title="Rendered page"></iframe>
25052503
</body>
25062504
</html>
@@ -2509,7 +2507,7 @@ export async function flushReadableStreamToFrame(readable, frame) {
25092507
```css src/styles.css hidden
25102508
iframe {
25112509
width: 100%;
2512-
height: 120px;
2510+
height: 160px;
25132511
border: 0;
25142512
}
25152513
```

‎src/content/reference/react/use.md‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1332,7 +1332,7 @@ async function getData(url) {
13321332
13331333
Pass the value returned by [`browser`](/reference/react-dom/browser) to `use` inside a component that should only render in the browser.
13341334
1335-
Press **Load draft**. The initial HTML contains the loading fallback. After hydration, React displays the draft loaded from `localStorage`.
1335+
Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`.
13361336
13371337
<Sandpack>
13381338
@@ -1367,9 +1367,12 @@ function SavedDraft() {
13671367

13681368
export default function App() {
13691369
return (
1370-
<Suspense fallback={<p>Loading draft...</p>}>
1371-
<SavedDraft />
1372-
</Suspense>
1370+
<>
1371+
<h1>Saved draft</h1>
1372+
<Suspense fallback={<p>Loading draft...</p>}>
1373+
<SavedDraft />
1374+
</Suspense>
1375+
</>
13731376
);
13741377
}
13751378
```
@@ -1383,6 +1386,7 @@ export default function Document() {
13831386
<head>
13841387
<title>Saved draft</title>
13851388
<style>{`
1389+
h1 { font-size: 24px; margin-top: 0; }
13861390
label, textarea { display: block; }
13871391
textarea { margin-top: 5px; }
13881392
`}</style>
@@ -1411,11 +1415,7 @@ async function main(frame) {
14111415
hydrateRoot(frame.contentDocument, <Document />);
14121416
}
14131417

1414-
const renderButton = document.getElementById('render');
1415-
renderButton.addEventListener('click', () => {
1416-
renderButton.disabled = true;
1417-
main(document.getElementById('preview'));
1418-
}, { once: true });
1418+
main(document.getElementById('preview'));
14191419
```
14201420
14211421
```js src/demo-helpers.js hidden
@@ -1445,8 +1445,6 @@ export async function flushReadableStreamToFrame(readable, frame) {
14451445
<title>Browser-only rendering</title>
14461446
</head>
14471447
<body>
1448-
<button id="render">Load draft</button>
1449-
<br /><br />
14501448
<iframe id="preview" title="Rendered page"></iframe>
14511449
</body>
14521450
</html>
@@ -1455,7 +1453,7 @@ export async function flushReadableStreamToFrame(readable, frame) {
14551453
```css src/styles.css hidden
14561454
iframe {
14571455
width: 100%;
1458-
height: 120px;
1456+
height: 160px;
14591457
border: 0;
14601458
}
14611459
```

0 commit comments

Comments
 (0)