Skip to content

Commit 26906f2

Browse files
aurorascharffaurorascharff
authored
[Suspense] Polish activation examples (#8525)
* Polish Suspense activation examples - Move Canary badges into section headings and render them icon-only in the table of contents - Replace the image demo's text fallback with a profile skeleton - Add a combined example coordinating data, a stylesheet, a font, and an image behind one boundary, with a plain DOM comparison - Match skeleton dimensions to the revealed content * Make the combined example's data delay consistent between runs
1 parent efaa3e5 commit 26906f2

4 files changed

Lines changed: 337 additions & 65 deletions

File tree

‎src/components/Layout/Toc.tsx‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
import cx from 'classnames';
1313
import {useTocHighlight} from './useTocHighlight';
14+
import {IsInTocContext} from '../MDX/TocContext';
1415
import type {Toc} from '../MDX/TocContext';
1516

1617
export function Toc({headings}: {headings: Toc}) {
@@ -32,37 +33,39 @@ export function Toc({headings}: {headings: Toc}) {
3233
overscrollBehavior: 'contain',
3334
}}>
3435
<ul className="space-y-2 pb-16">
35-
{headings.length > 0 &&
36-
headings.map((h, i) => {
37-
if (!h.url && process.env.NODE_ENV === 'development') {
38-
console.error('Heading does not have URL');
39-
}
40-
return (
41-
<li
42-
key={`heading-${h.url}-${i}`}
43-
className={cx(
44-
'text-sm px-2 rounded-s-xl',
45-
selectedIndex === i
46-
? 'bg-highlight dark:bg-highlight-dark'
47-
: null,
48-
{
49-
'ps-4': h?.depth === 3,
50-
hidden: h.depth && h.depth > 3,
51-
}
52-
)}>
53-
<a
36+
<IsInTocContext.Provider value={true}>
37+
{headings.length > 0 &&
38+
headings.map((h, i) => {
39+
if (!h.url && process.env.NODE_ENV === 'development') {
40+
console.error('Heading does not have URL');
41+
}
42+
return (
43+
<li
44+
key={`heading-${h.url}-${i}`}
5445
className={cx(
46+
'text-sm px-2 rounded-s-xl',
5547
selectedIndex === i
56-
? 'text-link dark:text-link-dark font-bold'
57-
: 'text-secondary dark:text-secondary-dark',
58-
'block hover:text-link dark:hover:text-link-dark leading-normal py-2'
59-
)}
60-
href={h.url}>
61-
{h.text}
62-
</a>
63-
</li>
64-
);
65-
})}
48+
? 'bg-highlight dark:bg-highlight-dark'
49+
: null,
50+
{
51+
'ps-4': h?.depth === 3,
52+
hidden: h.depth && h.depth > 3,
53+
}
54+
)}>
55+
<a
56+
className={cx(
57+
selectedIndex === i
58+
? 'text-link dark:text-link-dark font-bold'
59+
: 'text-secondary dark:text-secondary-dark',
60+
'block hover:text-link dark:hover:text-link-dark leading-normal py-2'
61+
)}
62+
href={h.url}>
63+
{h.text}
64+
</a>
65+
</li>
66+
);
67+
})}
68+
</IsInTocContext.Provider>
6669
</ul>
6770
</div>
6871
</nav>

‎src/components/MDX/MDXComponents.tsx‎

Lines changed: 56 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import YouWillLearnCard from './YouWillLearnCard';
3636
import {Challenges, Hint, Solution} from './Challenges';
3737
import {IconNavArrow} from '../Icon/IconNavArrow';
3838
import ButtonLink from 'components/ButtonLink';
39-
import {TocContext} from './TocContext';
39+
import {TocContext, IsInTocContext} from './TocContext';
4040
import type {Toc, TocItem} from './TocContext';
4141
import {TeamMember} from './TeamMember';
4242
import {LanguagesContext} from './LanguagesContext';
@@ -122,33 +122,57 @@ const RSC = ({children}: {children: React.ReactNode}) => (
122122
<ExpandableCallout type="rsc">{children}</ExpandableCallout>
123123
);
124124

125-
const CanaryBadge = ({title}: {title: string}) => (
126-
<span
127-
title={title}
128-
className={
129-
'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
130-
}>
131-
<IconCanary
132-
size="s"
133-
className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
134-
/>
135-
Canary only
136-
</span>
137-
);
125+
const CanaryBadge = ({title}: {title: string}) => {
126+
const isInToc = useContext(IsInTocContext);
127+
if (isInToc) {
128+
return (
129+
<IconCanary
130+
size="s"
131+
title={title}
132+
className="inline me-1 mb-0.5 text-gray-60 dark:text-gray-10"
133+
/>
134+
);
135+
}
136+
return (
137+
<span
138+
title={title}
139+
className={
140+
'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
141+
}>
142+
<IconCanary
143+
size="s"
144+
className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
145+
/>
146+
Canary only
147+
</span>
148+
);
149+
};
138150

139-
const ExperimentalBadge = ({title}: {title: string}) => (
140-
<span
141-
title={title}
142-
className={
143-
'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
144-
}>
145-
<IconExperimental
146-
size="s"
147-
className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
148-
/>
149-
Experimental only
150-
</span>
151-
);
151+
const ExperimentalBadge = ({title}: {title: string}) => {
152+
const isInToc = useContext(IsInTocContext);
153+
if (isInToc) {
154+
return (
155+
<IconExperimental
156+
size="s"
157+
title={title}
158+
className="inline me-1 mb-0.5 text-gray-60 dark:text-gray-10"
159+
/>
160+
);
161+
}
162+
return (
163+
<span
164+
title={title}
165+
className={
166+
'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
167+
}>
168+
<IconExperimental
169+
size="s"
170+
className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
171+
/>
172+
Experimental only
173+
</span>
174+
);
175+
};
152176

153177
const NextMajorBadge = ({title}: {title: string}) => (
154178
<span
@@ -422,7 +446,11 @@ function InlineToc() {
422446
if (root.children.length < 2) {
423447
return null;
424448
}
425-
return <InlineTocItem items={root.children} />;
449+
return (
450+
<IsInTocContext.Provider value={true}>
451+
<InlineTocItem items={root.children} />
452+
</IsInTocContext.Provider>
453+
);
426454
}
427455

428456
function InlineTocItem({items}: {items: Array<NestedTocNode>}) {

‎src/components/MDX/TocContext.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,6 @@ export type TocItem = {
2020
export type Toc = Array<TocItem>;
2121

2222
export const TocContext = createContext<Toc>([]);
23+
24+
// Lets badge components render compactly when inside the table of contents.
25+
export const IsInTocContext = createContext(false);

0 commit comments

Comments
 (0)