diff --git a/packages/@react-spectrum/s2/src/font-faces.css b/packages/@react-spectrum/s2/src/font-faces.css
index 56445ff5946..b177ee76f01 100644
--- a/packages/@react-spectrum/s2/src/font-faces.css
+++ b/packages/@react-spectrum/s2/src/font-faces.css
@@ -16,8 +16,7 @@
   font-stretch: normal;
 }
 
-/* There are currently no italics in Spectrum. Uncomment these if needed. */
-/*
+/* Italics are not used by Spectrum components, but may be used in user-generated content. */
 @font-face {
   font-family: "adobe-clean-spectrum-vf";
   src: url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff2"), url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff"), url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("opentype");
@@ -35,38 +34,46 @@
   font-weight: 100 1000;
   font-stretch: normal;
 }
-*/
 
 @font-face {
-  font-family: "myriad-arabic";
-  src: url("https://use.typekit.net/af/dfb464/00000000000000007735a2f9/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/dfb464/00000000000000007735a2f9/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/dfb464/00000000000000007735a2f9/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
+  font-family: "adobe-clean-arabic";
+  src: url("https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
   font-display: auto;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 400;
   font-stretch: normal;
 }
 
 @font-face {
-  font-family: "myriad-arabic";
-  src: url("https://use.typekit.net/af/560a53/00000000000000007735a300/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/560a53/00000000000000007735a300/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/560a53/00000000000000007735a300/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-family: "adobe-clean-arabic";
+  src: url("https://use.typekit.net/af/502696/0000000000000000775e72d7/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/502696/0000000000000000775e72d7/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/502696/0000000000000000775e72d7/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("opentype");
   font-display: auto;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 500;
   font-stretch: normal;
 }
 
 @font-face {
-  font-family: "myriad-arabic";
-  src: url("https://use.typekit.net/af/0f9162/00000000000000007735a307/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/0f9162/00000000000000007735a307/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/0f9162/00000000000000007735a307/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("opentype");
+  font-family: "adobe-clean-arabic";
+  src: url("https://use.typekit.net/af/756050/0000000000000000775e72db/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/756050/0000000000000000775e72db/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/756050/0000000000000000775e72db/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
   font-display: auto;
   font-style: normal;
-  font-weight: 600;
+  font-weight: 700;
   font-stretch: normal;
 }
 
 @font-face {
-  font-family: "myriad-arabic";
-  src: url("https://use.typekit.net/af/ab2792/00000000000000007735a309/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/ab2792/00000000000000007735a309/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/ab2792/00000000000000007735a309/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("opentype");
+  font-family: "adobe-clean-arabic";
+  src: url("https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("woff2"), url("https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("woff"), url("https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 800;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "adobe-clean-arabic";
+  src: url("https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("opentype");
   font-display: auto;
   font-style: normal;
   font-weight: 900;
@@ -74,8 +81,26 @@
 }
 
 @font-face {
-  font-family: "myriad-hebrew";
-  src: url("https://use.typekit.net/af/ffca46/00000000000000007735a30a/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/ffca46/00000000000000007735a30a/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/ffca46/00000000000000007735a30a/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
+  font-family: "adobe-clean-hebrew";
+  src: url("https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "adobe-clean-hebrew";
+  src: url("https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "adobe-clean-hebrew";
+  src: url("https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
   font-display: auto;
   font-style: normal;
   font-weight: 700;
@@ -83,20 +108,20 @@
 }
 
 @font-face {
-  font-family: "myriad-hebrew";
-  src: url("https://use.typekit.net/af/e90860/00000000000000007735a313/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/e90860/00000000000000007735a313/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/e90860/00000000000000007735a313/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-family: "adobe-clean-hebrew";
+  src: url("https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("woff2"), url("https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("woff"), url("https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("opentype");
   font-display: auto;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 800;
   font-stretch: normal;
 }
 
 @font-face {
-  font-family: "myriad-hebrew";
-  src: url("https://use.typekit.net/af/619974/00000000000000007735a31f/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/619974/00000000000000007735a31f/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/619974/00000000000000007735a31f/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("opentype");
+  font-family: "adobe-clean-hebrew";
+  src: url("https://use.typekit.net/af/34b661/0000000000000000775e733f/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/34b661/0000000000000000775e733f/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/34b661/0000000000000000775e733f/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("opentype");
   font-display: auto;
   font-style: normal;
-  font-weight: 600;
+  font-weight: 900;
   font-stretch: normal;
 }
 
diff --git a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
index f0af9092a47..ac6e630ffd4 100644
--- a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
@@ -127,14 +127,14 @@ export const Fonts: Story = {
           <ActionButton {...args}><NewIcon /><Text>{messages['en-US'].cut}</Text></ActionButton>
           <ActionButton {...args}><NewIcon /><Text>{messages['en-US'].paste}</Text></ActionButton>
         </Provider>
-        Arabic (myriad-arabic)
+        Arabic (adobe-clean-arabic)
         <Provider locale="ar-AR" styles={style({display: 'contents'})}>
           <ActionButton {...args}><NewIcon /><Text>{messages['ar-AR'].button}</Text></ActionButton>
           <ActionButton {...args}><NewIcon /><Text>{messages['ar-AR'].copy}</Text></ActionButton>
           <ActionButton {...args}><NewIcon /><Text>{messages['ar-AR'].cut}</Text></ActionButton>
           <ActionButton {...args}><NewIcon /><Text>{messages['ar-AR'].paste}</Text></ActionButton>
         </Provider>
-        Hebrew (myriad-hebrew)
+        Hebrew (adobe-clean-hebrew)
         <Provider locale="he-IL" styles={style({display: 'contents'})}>
           <ActionButton {...args}><NewIcon /><Text>{messages['he-IL'].button}</Text></ActionButton>
           <ActionButton {...args}><NewIcon /><Text>{messages['he-IL'].copy}</Text></ActionButton>
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index 281c759c421..2db0fe14fa6 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -434,8 +434,7 @@ let durationValue = (value: number | string) => typeof value === 'number' ? valu
 const fontWeightBase = {
   normal: '400',
   medium: {
-    default: '500',
-    ':lang(ar, he)': '600' // Myriad does not have a 500 weight
+    default: '500'
   },
   bold: {
     default: '700',
@@ -443,8 +442,7 @@ const fontWeightBase = {
   },
   'extra-bold': {
     default: '800',
-    ':lang(ja, ko, zh)': '700', // Adobe Clean Han uses 700 as the extra bold weight.
-    ':lang(ar, he)': '700' // Myriad does not have a 800 weight
+    ':lang(ja, ko, zh)': '700' // Adobe Clean Han uses 700 as the extra bold weight.
   },
   black: '900'
 } as const;
@@ -466,8 +464,8 @@ const fontWeight = {
 } as const;
 
 const i18nFonts = {
-  ':lang(ar)': 'myriad-arabic, ui-sans-serif, system-ui, sans-serif',
-  ':lang(he)': 'myriad-hebrew, ui-sans-serif, system-ui, sans-serif',
+  ':lang(ar)': 'adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif',
+  ':lang(he)': 'adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif',
   ':lang(ja)': "adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif",
   ':lang(ko)': "adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif",
   ':lang(zh)': "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif",
@@ -780,19 +778,15 @@ export const style = createTheme({
       ui: {
         // Calculate line-height based on font size.
         default: lineHeightCalc,
-        // Arabic and hebrew use the old line-height for now since they are on Myriad instead of Adobe Clean.
-        ':lang(ar, he)': getToken('line-height-100'),
         // CJK fonts use a larger line-height.
         ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': getToken('line-height-200')
       },
       heading: {
         default: lineHeightCalc,
-        ':lang(ar, he)': getToken('line-height-100'),
         ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': getToken('heading-cjk-line-height')
       },
       title: {
         default: lineHeightCalc,
-        ':lang(ar, he)': getToken('line-height-100'),
         ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': getToken('title-cjk-line-height')
       },
       body: {
@@ -802,7 +796,6 @@ export const style = createTheme({
       },
       detail: {
         default: lineHeightCalc,
-        ':lang(ar, he)': getToken('line-height-100'),
         ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': getToken('detail-cjk-line-height')
       },
       code: {
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 43757368e28..a466d175b84 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -1,5 +1,5 @@
 import {ExampleList} from './ExampleList';
-import {Nav, PendingPageProvider} from '../src/Nav';
+import {Nav} from '../src/Nav';
 import {OptimisticMobileToc, OptimisticToc} from './OptimisticToc';
 import type {Page, PageProps} from '@parcel/rsc';
 import React, {ReactElement} from 'react';
@@ -254,93 +254,91 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             }
           })}>
           <Header pages={pages} currentPage={currentPage} />
-          <PendingPageProvider currentPage={currentPage}>
-            <MobileHeader
-              toc={<OptimisticMobileToc currentPage={currentPage} />}
-              pages={pages}
-              currentPage={currentPage} />
-            <div className={style({display: 'flex', width: 'full', flexGrow: {default: 1, lg: 0}})}>
-              {currentPage.exports?.hideNav ? null : <Nav pages={pages} currentPage={currentPage} />}
-              <main
-                key={currentPage.url}
-                style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}
+          <MobileHeader
+            toc={<OptimisticMobileToc currentPage={currentPage} pages={pages} />}
+            pages={pages}
+            currentPage={currentPage} />
+          <div className={style({display: 'flex', width: 'full', flexGrow: {default: 1, lg: 0}})}>
+            {currentPage.exports?.hideNav ? null : <Nav pages={pages} currentPage={currentPage} />}
+            <main
+              key={currentPage.url}
+              style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}
+              className={style({
+                isolation: 'isolate',
+                backgroundColor: 'base',
+                padding: {
+                  default: 12,
+                  lg: 40
+                },
+                borderRadius: {
+                  default: 'none',
+                  lg: 'xl'
+                },
+                boxShadow: {
+                  lg: 'emphasized'
+                },
+                width: 'full',
+                boxSizing: 'border-box',
+                flexGrow: 1,
+                display: 'flex',
+                justifyContent: 'space-between',
+                position: 'relative',
+                height: {
+                  lg: '[calc(100vh - 72px)]'
+                },
+                overflow: {
+                  lg: 'auto'
+                }
+              })}>
+              <div
                 className={style({
-                  isolation: 'isolate',
-                  backgroundColor: 'base',
-                  padding: {
-                    default: 12,
-                    lg: 40
-                  },
-                  borderRadius: {
-                    default: 'none',
-                    lg: 'xl'
-                  },
-                  boxShadow: {
-                    lg: 'emphasized'
-                  },
-                  width: 'full',
-                  boxSizing: 'border-box',
-                  flexGrow: 1,
                   display: 'flex',
-                  justifyContent: 'space-between',
-                  position: 'relative',
+                  flexDirection: 'column',
+                  flexGrow: 1,
+                  width: 'full'
+                })}>
+                <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
+                  <NavigationSuspense pages={pages}>
+                    <article
+                      className={articleStyles({isWithToC: hasToC})}>
+                      {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
+                      {React.cloneElement(children, {
+                        components: isSubpage ?
+                          subPageComponents(parentPage) :
+                          components,
+                        pages
+                      })}
+                      {currentPage.exports?.relatedPages && (
+                        <MobileRelatedPages pages={currentPage.exports.relatedPages} />
+                      )}
+                    </article>
+                  </NavigationSuspense>
+                </CodePlatterProvider>
+                <Footer />
+              </div>
+              {hasToC && <aside
+                className={style({
+                  position: 'sticky',
+                  top: 0,
                   height: {
+                    default: 'fit',
                     lg: '[calc(100vh - 72px)]'
                   },
-                  overflow: {
-                    lg: 'auto'
-                  }
+                  paddingY: 32,
+                  paddingX: 4,
+                  boxSizing: 'border-box',
+                  width: 180,
+                  flexShrink: 0,
+                  display: {
+                    default: 'none',
+                    lg: 'flex'
+                  },
+                  flexDirection: 'column'
                 })}>
-                <div
-                  className={style({
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flexGrow: 1,
-                    width: 'full'
-                  })}>
-                  <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
-                    <NavigationSuspense pages={pages}>
-                      <article
-                        className={articleStyles({isWithToC: hasToC})}>
-                        {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
-                        {React.cloneElement(children, {
-                          components: isSubpage ?
-                            subPageComponents(parentPage) :
-                            components,
-                          pages
-                        })}
-                        {currentPage.exports?.relatedPages && (
-                          <MobileRelatedPages pages={currentPage.exports.relatedPages} />
-                        )}
-                      </article>
-                    </NavigationSuspense>
-                  </CodePlatterProvider>
-                  <Footer />
-                </div>
-                {hasToC && <aside
-                  className={style({
-                    position: 'sticky',
-                    top: 0,
-                    height: {
-                      default: 'fit',
-                      lg: '[calc(100vh - 72px)]'
-                    },
-                    paddingY: 32,
-                    paddingX: 4,
-                    boxSizing: 'border-box',
-                    width: 180,
-                    flexShrink: 0,
-                    display: {
-                      default: 'none',
-                      lg: 'flex'
-                    },
-                    flexDirection: 'column'
-                  })}>
-                  <OptimisticToc currentPage={currentPage} />
-                </aside>}
-              </main>
-            </div>
-          </PendingPageProvider>
+                <OptimisticToc currentPage={currentPage} pages={pages} />
+              </aside>}
+            </main>
+          </div>
         </div>
         <ToastContainer placement="bottom" />
       </body>
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index cd1c00c64d1..2e5116d482f 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -2,36 +2,11 @@
 
 import {focusRing, size, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {getLibraryFromPage} from './library';
+import {getPageFromPathname, getSnapshot, subscribe} from './NavigationSuspense';
 import {Link} from 'react-aria-components';
 import type {Page, PageProps} from '@parcel/rsc';
 import {Picker, pressScale} from '@react-spectrum/s2';
-import React, {createContext, startTransition, useContext, useEffect, useOptimistic, useRef, useState} from 'react';
-
-export function PendingPageProvider({children, currentPage}: {children: React.ReactNode, currentPage: Page}) {
-  let [displayPage, setDisplayPage] = useOptimistic(
-    currentPage,
-    (_, pendingPage: Page) => pendingPage
-  );
-  
-  useEffect(() => {
-    const unsubscribe = subscribeToClearPendingPage(() => {
-      startTransition(() => {
-        setDisplayPage(currentPage);
-      });
-    });
-    return unsubscribe;
-  }, [currentPage, setDisplayPage]);
-
-  let pendingPage = displayPage.url !== currentPage.url ? displayPage : null;
-
-  return (
-    <PendingPageContext.Provider value={pendingPage}>
-      <PendingNavContext.Provider value={setDisplayPage}>
-        {children}
-      </PendingNavContext.Provider>
-    </PendingPageContext.Provider>
-  );
-}
+import React, {createContext, useContext, useEffect, useRef, useState, useSyncExternalStore} from 'react';
 
 export function Nav({pages, currentPage}: PageProps) {
   let currentLibrary = getLibraryFromPage(currentPage);
@@ -56,7 +31,8 @@ export function Nav({pages, currentPage}: PageProps) {
   }
 
   let [maskSize, setMaskSize] = useState(0);
-  let pendingPage = usePendingPage();
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const pendingPage = snapshot.pathname ? getPageFromPathname(pages, snapshot.pathname) : null;
   let displayUrl = pendingPage?.url ?? currentPage.url;
 
   let sortedSections = [...sections].sort((a, b) => {
@@ -137,24 +113,10 @@ function SideNavSection({title, children}) {
 }
 
 const SideNavContext = createContext('');
-const PendingNavContext = createContext<React.Dispatch<Page> | null>(null);
-const PendingPageContext = createContext<Page | null>(null);
-
-let clearPendingPageListeners = new Set<() => void>();
-
-function subscribeToClearPendingPage(callback: () => void): () => void {
-  clearPendingPageListeners.add(callback);
-  return () => {
-    void clearPendingPageListeners.delete(callback);
-  };
-}
 
-export function clearPendingPage() {
-  clearPendingPageListeners.forEach(callback => callback());
-}
-
-export function usePendingPage() {
-  return useContext(PendingPageContext);
+export function usePendingPage(pages: Page[]): Page | null {
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return snapshot.pathname ? getPageFromPathname(pages, snapshot.pathname) : null;
 }
 
 export function SideNav({children, isNested = false}) {
@@ -194,8 +156,7 @@ export function SideNavItem(props) {
 export function SideNavLink(props) {
   let linkRef = useRef(null);
   let selected = useContext(SideNavContext);
-  let setPendingPage = useContext(PendingNavContext);
-  let {page, ...linkProps} = props;
+  let {...linkProps} = props;
   
   return (
     <Link
@@ -203,13 +164,6 @@ export function SideNavLink(props) {
       ref={linkRef}
       aria-current={props.isSelected || selected === props.href ? 'page' : undefined}
       style={pressScale(linkRef)}
-      onPress={() => {
-        if (setPendingPage && page) {
-          startTransition(() => {
-            setPendingPage(page);
-          });
-        }
-      }}
       className={style({
         ...focusRing(),
         minHeight: 32,
diff --git a/packages/dev/s2-docs/src/NavigationSuspense.tsx b/packages/dev/s2-docs/src/NavigationSuspense.tsx
index 9cc4461df43..f06d0c2d979 100644
--- a/packages/dev/s2-docs/src/NavigationSuspense.tsx
+++ b/packages/dev/s2-docs/src/NavigationSuspense.tsx
@@ -2,19 +2,21 @@
 
 import type {Page} from '@parcel/rsc';
 import {PageSkeleton} from './PageSkeleton';
-import React, {Suspense, use, useSyncExternalStore} from 'react';
+import React, {Suspense, use, useEffect, useState, useSyncExternalStore} from 'react';
+
+const SKELETON_DELAY = 150;
 
 let navigationPromise: Promise<void> | null = null;
 let targetPathname: string | null = null;
 let listeners = new Set<() => void>();
 let cachedSnapshot: {promise: Promise<void> | null, pathname: string | null} = {promise: null, pathname: null};
 
-function subscribe(callback: () => void) {
+export function subscribe(callback: () => void) {
   listeners.add(callback);
   return () => listeners.delete(callback);
 }
 
-function getSnapshot() {
+export function getSnapshot() {
   if (cachedSnapshot.promise !== navigationPromise || cachedSnapshot.pathname !== targetPathname) {
     cachedSnapshot = {promise: navigationPromise, pathname: targetPathname};
   }
@@ -66,9 +68,9 @@ function getPageTitle(page: Page): string {
   return page.exports?.title ?? page.tableOfContents?.[0]?.title ?? page.name;
 }
 
-function getPageInfo(pages: Page[], pathname: string | null): {title?: string, section?: string, hasToC?: boolean} {
+export function getPageFromPathname(pages: Page[], pathname: string | null): Page | null {
   if (!pathname) {
-    return {};
+    return null;
   }
   
   let publicUrl = process.env.PUBLIC_URL || '/';
@@ -85,6 +87,12 @@ function getPageInfo(pages: Page[], pathname: string | null): {title?: string, s
           normalizedPageUrl === normalizedPathname + '.html';
   });
   
+  return targetPage ?? null;
+}
+
+function getPageInfo(pages: Page[], pathname: string | null): {title?: string, section?: string, hasToC?: boolean} {
+  const targetPage = getPageFromPathname(pages, pathname);
+  
   if (!targetPage) {
     return {};
   }
@@ -99,9 +107,22 @@ function getPageInfo(pages: Page[], pathname: string | null): {title?: string, s
 function NavigationContent({children}: {children: React.ReactNode}) {
   // Subscribe to navigation promise changes to ensure React re-renders when setNavigationPromise() is called.
   const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  if (snapshot.promise) {
-    use(snapshot.promise);
+  let [delayedPromise, setDelayedPromise] = useState<Promise<void> | null>(null);
+  useEffect(() => {
+    let promise = snapshot.promise;
+    if (!promise) {
+      return;
+    }
+    let timeout = setTimeout(() => {
+      setDelayedPromise(promise);
+    }, SKELETON_DELAY);
+    return () => clearTimeout(timeout);
+  }, [snapshot]);
+
+  if (delayedPromise) {
+    use(delayedPromise);
   }
+
   return <>{children}</>;
 }
 
diff --git a/packages/dev/s2-docs/src/OptimisticToc.tsx b/packages/dev/s2-docs/src/OptimisticToc.tsx
index 6a75d0c2135..340c18845bd 100644
--- a/packages/dev/s2-docs/src/OptimisticToc.tsx
+++ b/packages/dev/s2-docs/src/OptimisticToc.tsx
@@ -43,8 +43,8 @@ function renderMobileToc(toc: TocNode[], seen = new Map()) {
   });
 }
 
-export function OptimisticToc({currentPage}: {currentPage: Page}) {
-  let pendingPage = usePendingPage();
+export function OptimisticToc({currentPage, pages}: {currentPage: Page, pages: Page[]}) {
+  let pendingPage = usePendingPage(pages);
   let displayPage = pendingPage ?? currentPage;
   
   return (
@@ -61,8 +61,8 @@ export function OptimisticToc({currentPage}: {currentPage: Page}) {
   );
 }
 
-export function OptimisticMobileToc({currentPage}: {currentPage: Page}) {
-  let pendingPage = usePendingPage();
+export function OptimisticMobileToc({currentPage, pages}: {currentPage: Page, pages: Page[]}) {
+  let pendingPage = usePendingPage(pages);
   let displayPage = pendingPage ?? currentPage;
   
   if ((displayPage.tableOfContents?.[0]?.children?.length ?? 0) <= 1) {
diff --git a/packages/dev/s2-docs/src/PageSkeleton.tsx b/packages/dev/s2-docs/src/PageSkeleton.tsx
index 2c59cff79c6..ba149d626a1 100644
--- a/packages/dev/s2-docs/src/PageSkeleton.tsx
+++ b/packages/dev/s2-docs/src/PageSkeleton.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import {getTextWidth} from './textWidth';
+import {Image, Skeleton, Text} from '@react-spectrum/s2';
 import React from 'react';
-import {Skeleton, Text} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 const h1 = style({
@@ -34,27 +34,28 @@ const skeletonH2 = style({
   width: '40%'
 });
 
-const skeletonVisualExample = style({
-  backgroundColor: 'layer-1',
-  padding: {
-    default: 12,
-    lg: 24
-  },
-  marginTop: {
-    default: 20
-  },
-  borderRadius: 'xl',
-  width: 'full',
-  boxSizing: 'border-box',
-  minHeight: {
-    default: 200,
-    lg: 300
-  }
-});
-
 function SkeletonVisualExample() {
   return (
-    <div className={skeletonVisualExample} />
+    <Image
+      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E"
+      styles={style({
+        padding: {
+          default: 12,
+          lg: 24
+        },
+        marginTop: {
+          default: 20
+        },
+        borderRadius: 'xl',
+        width: 'full',
+        boxSizing: 'border-box',
+        height: {
+          default: 200,
+          lg: 300
+        },
+        objectFit: 'cover'
+      })}
+      alt="Loading example" />
   );
 }
 
diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
index d58afb25a64..eb8d26f77da 100644
--- a/packages/dev/s2-docs/src/client.tsx
+++ b/packages/dev/s2-docs/src/client.tsx
@@ -1,6 +1,5 @@
 'use client-entry';
 
-import {clearPendingPage} from './Nav';
 import {fetchRSC, hydrate} from '@parcel/rsc/client';
 import {getPrefetchedPromise, prefetchRoute} from './prefetch';
 import {type ReactElement} from 'react';
@@ -14,7 +13,6 @@ let isClientLink = (link: HTMLAnchorElement, pathname: string) => {
     link.href &&
     (!link.target || link.target === '_self') &&
     link.origin === location.origin &&
-    (link.pathname !== location.pathname || link.hash) &&
     !link.hasAttribute('download') &&
     link.pathname.startsWith(pathname)
   );
@@ -124,7 +122,6 @@ async function navigate(pathname: string, push = false) {
         return;
       }
       
-      clearPendingPage();
       try {
         let errorRes = await fetchRSC<ReactElement>('/error.rsc');
         
@@ -151,7 +148,6 @@ async function navigate(pathname: string, push = false) {
     }
   })();
   
-  // Store the promise for NavigationSuspense to use
   setNavigationPromise(navigationPromise, pathname);
 }
 
@@ -177,7 +173,7 @@ document.addEventListener('pointerover', e => {
   // Clear any pending prefetch
   clearPrefetchTimeout();
   
-  if (link && isClientLink(link, publicUrlPathname)) {
+  if (link && isClientLink(link, publicUrlPathname) && link.pathname !== location.pathname) {
     currentPrefetchLink = link;
     prefetchTimeout = setTimeout(() => {
       prefetchRoute(link.pathname + link.search + link.hash);
@@ -202,7 +198,7 @@ document.addEventListener('focus', e => {
   // Clear any pending prefetch
   clearPrefetchTimeout();
   
-  if (link && isClientLink(link, publicUrlPathname)) {
+  if (link && isClientLink(link, publicUrlPathname) && link.pathname !== location.pathname) {
     currentPrefetchLink = link;
     prefetchTimeout = setTimeout(() => {
       prefetchRoute(link.pathname + link.search + link.hash);