diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
index f6394b6511a..f03648e0047 100644
--- a/packages/dev/s2-docs/src/CodePlatter.tsx
+++ b/packages/dev/s2-docs/src/CodePlatter.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
+import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, UNSTABLE_ToastQueue as ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import {CopyButton} from './CopyButton';
 import {createCodeSandbox, getCodeSandboxFiles} from './CodeSandbox';
 import {createStackBlitz} from './StackBlitz';
@@ -97,7 +97,9 @@ export function CodePlatter({children, shareUrl, files, type, registryUrl, showC
                     if (node instanceof HTMLHeadingElement && node.id) {
                       url.hash = '#' + node.id;
                     }
-                    navigator.clipboard.writeText(url.toString());
+                    navigator.clipboard.writeText(url.toString()).catch(() => {
+                      ToastQueue.negative('Failed to copy link.');
+                    });
                   }}>
                   <LinkIcon />
                   <Text slot="label">Copy link</Text>
@@ -265,7 +267,9 @@ function ShadcnDialog({registryUrl}) {
           <Button
             variant="accent"
             onPress={() => {
-              navigator.clipboard.writeText(preRef.current!.textContent!);
+              navigator.clipboard.writeText(preRef.current!.textContent!).catch(() => {
+                ToastQueue.negative('Failed to copy command. Please try again.');
+              });
               close();
             }}>
             Copy and close
diff --git a/packages/dev/s2-docs/src/CopyButton.tsx b/packages/dev/s2-docs/src/CopyButton.tsx
index ef0fc08197a..c045e19f9b5 100644
--- a/packages/dev/s2-docs/src/CopyButton.tsx
+++ b/packages/dev/s2-docs/src/CopyButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
+import {ActionButton, UNSTABLE_ToastQueue as ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Copy from '@react-spectrum/s2/icons/Copy';
 import React, {useEffect, useRef, useState} from 'react';
@@ -44,7 +44,7 @@ export function CopyButton({text, getText, ariaLabel = 'Copy', tooltip = 'Copy',
       setIsCopied(true);
       timeout.current = setTimeout(() => setIsCopied(false), 2000);
     }).catch(() => {
-      // noop
+      ToastQueue.negative('Failed to copy.');
     });
   };
 
diff --git a/packages/dev/s2-docs/src/Header.tsx b/packages/dev/s2-docs/src/Header.tsx
index 6353c74f703..ba79a8a6fa0 100644
--- a/packages/dev/s2-docs/src/Header.tsx
+++ b/packages/dev/s2-docs/src/Header.tsx
@@ -6,7 +6,6 @@ import BetaApp from '@react-spectrum/s2/icons/BetaApp';
 import {flushSync} from 'react-dom';
 import {getLibraryFromPage, getLibraryIcon, getLibraryLabel} from './library';
 import GithubLogo from './icons/GithubLogo';
-import {MarkdownMenu} from './MarkdownMenu';
 // @ts-ignore
 import {PageProps} from '@parcel/rsc';
 import React, {CSSProperties, useId, useState} from 'react';
@@ -115,7 +114,6 @@ export default function Header(props: PageProps) {
               <BetaApp />
               <Text>Beta Preview</Text>
             </Badge>
-            <MarkdownMenu url={currentPage.url} />
             <ActionButton aria-label="React Spectrum GitHub repo" size="L" isQuiet onPress={() => window.open('https://github.com/adobe/react-spectrum', '_blank', 'noopener,noreferrer')}>
               <GithubLogo />
             </ActionButton>
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index da720249066..fcac6523f94 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -4,7 +4,7 @@
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Close from '@react-spectrum/s2/icons/Close';
-import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {iconAliases} from './iconAliases.js';
 // @ts-ignore
@@ -50,7 +50,7 @@ export function useCopyImport() {
       setCopiedId(id);
       timeout.current = setTimeout(() => setCopiedId(null), 2000);
     }).catch(() => {
-      // noop
+      ToastQueue.negative('Failed to copy import statement.');
     });
   }, []);
 
diff --git a/packages/dev/s2-docs/src/IllustrationCards.tsx b/packages/dev/s2-docs/src/IllustrationCards.tsx
index 1d5f7cd4f9f..be0a82112a9 100644
--- a/packages/dev/s2-docs/src/IllustrationCards.tsx
+++ b/packages/dev/s2-docs/src/IllustrationCards.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
-import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
 import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 // @ts-ignore
 import Gradient from '@react-spectrum/s2/icons/Gradient';
@@ -100,7 +100,7 @@ let handleCopyImport = (id: string, variant: string, gradientStyle: string) => {
   navigator.clipboard.writeText(importText).then(() => {
     // noop
   }).catch(() => {
-    // noop
+    ToastQueue.negative('Failed to copy import statement.');
   });
 };
 
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index a2f46aca9d8..202759e45d1 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -1,6 +1,7 @@
 import {ExampleList} from './ExampleList';
-import {MobileOnPageNav, Nav, OnPageNav, SideNav, SideNavItem, SideNavLink} from '../src/Nav';
-import type {Page, PageProps, TocNode} from '@parcel/rsc';
+import {Nav, PendingPageProvider} from '../src/Nav';
+import {OptimisticMobileToc, OptimisticToc} from './OptimisticToc';
+import type {Page, PageProps} from '@parcel/rsc';
 import React, {ReactElement} from 'react';
 // @ts-ignore
 import '../src/client';
@@ -9,11 +10,13 @@ import internationalizedFavicon from 'url:../assets/internationalized.ico';
 // @ts-ignore
 import reactAriaFavicon from 'url:../assets/react-aria.ico';
 import './anatomy.css';
+import './footer.css';
 import ChevronRightIcon from '@react-spectrum/s2/icons/ChevronRight';
 import {ClassAPI} from './ClassAPI';
 import {Code} from './Code';
 import {CodeBlock} from './CodeBlock';
 import {CodePlatterProvider} from './CodePlatter';
+import {Divider, Provider, UNSTABLE_ToastContainer as ToastContainer} from '@react-spectrum/s2';
 import {ExampleSwitcher} from './ExampleSwitcher';
 import {getLibraryFromPage, getLibraryFromUrl, getLibraryLabel} from './library';
 import {getTextWidth} from './textWidth';
@@ -22,7 +25,7 @@ import Header from './Header';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Link, TitleLink} from './Link';
 import {MobileHeader} from './MobileHeader';
-import {PickerItem, Provider} from '@react-spectrum/s2';
+import {NavigationSuspense} from './NavigationSuspense';
 import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
 import {TypeLink} from './types';
@@ -77,10 +80,6 @@ const subPageComponents = (previousPage?: Page) => ({
   )
 });
 
-function anchorId(children) {
-  return children.replace(/\s/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase();
-}
-
 const getTitle = (currentPage: Page): string => {
   const explicitTitle = (currentPage as any).pageTitle || currentPage.exports?.pageTitle;
   if (explicitTitle && explicitTitle !== currentPage.tableOfContents?.[0]?.title && explicitTitle !== currentPage.name) {
@@ -139,6 +138,36 @@ let articleStyles = style({
   height: 'fit'
 });
 
+function Footer() {
+  const year = new Date().getFullYear();
+  return (
+    <footer
+      className={style({
+        marginTop: 32,
+        paddingY: 12
+      })}>
+      <Divider size="S" />
+      <ul
+        className={style({
+          display: 'flex',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+          paddingX: 12,
+          margin: 0,
+          marginTop: 16,
+          font: 'body-2xs',
+          listStyleType: 'none'
+        })}>
+        <li>Copyright © {year} Adobe. All rights reserved.</li>
+        <li><Link isQuiet href="//www.adobe.com/privacy.html" variant="secondary">Privacy</Link></li>
+        <li><Link isQuiet href="//www.adobe.com/legal/terms.html" variant="secondary">Terms of Use</Link></li>
+        <li><Link isQuiet href="//www.adobe.com/privacy/cookies.html" variant="secondary">Cookies</Link></li>
+        <li><Link isQuiet href="//www.adobe.com/privacy/ca-rights.html" variant="secondary">Do not sell my personal information</Link></li>
+      </ul>
+    </footer>
+  );
+}
+
 export function Layout(props: PageProps & {children: ReactElement<any>}) {
   let {pages, currentPage, children} = props;
   let hasToC = !currentPage.exports?.hideNav && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
@@ -218,121 +247,104 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             gap: {
               default: 0,
               lg: 12
+            },
+            minHeight: {
+              default: 'screen',
+              lg: 'auto'
             }
           })}>
           <Header pages={pages} currentPage={currentPage} />
-          <MobileHeader
-            toc={(currentPage.tableOfContents?.[0]?.children?.length ?? 0) > 1 ? <MobileToc key="toc" toc={currentPage.tableOfContents ?? []} currentPage={currentPage} /> : null}
-            pages={pages}
-            currentPage={currentPage} />
-          <div className={style({display: 'flex', width: 'full'})}>
-            {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'
-                }
-              })}>
-              <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
-                <article
-                  className={articleStyles({isWithToC: hasToC})}>
-                  {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
-                  {React.cloneElement(children, {
-                    components: isSubpage ?
-                      subPageComponents(parentPage) :
-                      components,
-                    pages
-                  })}
-                </article>
-              </CodePlatterProvider>
-              {hasToC && <aside
+          <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}}
                 className={style({
-                  position: 'sticky',
-                  top: 0,
-                  height: 'fit',
-                  maxHeight: 'screen',
-                  overflow: 'auto',
-                  paddingY: 32,
-                  boxSizing: 'border-box',
-                  display: {
+                  isolation: 'isolate',
+                  backgroundColor: 'base',
+                  padding: {
+                    default: 12,
+                    lg: 40
+                  },
+                  borderRadius: {
                     default: 'none',
-                    lg: 'block'
+                    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({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Contents</div>
-                <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} />
-              </aside>}
-            </main>
-          </div>
+                <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
+                        })}
+                      </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>
         </div>
+        <ToastContainer placement="bottom" />
       </body>
     </Provider>
   );
 }
 
-function Toc({toc}) {
-  return (
-    <OnPageNav>
-      <SideNav>
-        {toc.map((c, i) => (
-          <SideNavItem key={i}>
-            <SideNavLink href={'#' + anchorId(c.title)}>{c.title}</SideNavLink>
-            {c.children.length > 0 && <Toc toc={c.children} />}
-          </SideNavItem>
-        ))}
-      </SideNav>
-    </OnPageNav>
-  );
-}
-
-function MobileToc({toc, currentPage}) {
-  return (
-    <MobileOnPageNav currentPage={currentPage}>
-      {renderMobileToc(toc)}
-    </MobileOnPageNav>
-  );
-}
-
-function renderMobileToc(toc: TocNode[], seen = new Map()) {
-  return toc.map((c) => {
-    let href = c.level === 1 ? '#top' : '#' + anchorId(c.title);
-    if (seen.has(href)) {
-      seen.set(href, seen.get(href) + 1);
-      href += '-' + seen.get(href);
-    } else {
-      seen.set(href, 1);
-    }
-    return (<React.Fragment key={href}>
-      <PickerItem id={href} href={href}>{c.title}</PickerItem>
-      {c.children.length > 0 && renderMobileToc(c.children, seen)}
-    </React.Fragment>);
-  });
-}
-
 export function Time({date}: {date: string}) {
   let dateObj = new Date(date);
   return (
diff --git a/packages/dev/s2-docs/src/MarkdownMenu.tsx b/packages/dev/s2-docs/src/MarkdownMenu.tsx
index 18dbc2a9dba..3faca5a37cd 100644
--- a/packages/dev/s2-docs/src/MarkdownMenu.tsx
+++ b/packages/dev/s2-docs/src/MarkdownMenu.tsx
@@ -1,9 +1,12 @@
 'use client';
 
-import {ActionButton, Menu, MenuItem, MenuTrigger, Text} from '@react-spectrum/s2';
+import {ActionButton, Menu, MenuItem, MenuTrigger, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Copy from '@react-spectrum/s2/icons/Copy';
-import OpenIn from '@react-spectrum/s2/icons/OpenIn';
-import React, {useCallback} from 'react';
+import {getLibraryFromUrl, getLibraryLabel} from './library';
+import More from '@react-spectrum/s2/icons/More';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 interface MarkdownMenuProps {
   url: string | undefined
@@ -11,51 +14,63 @@ interface MarkdownMenuProps {
 
 export function MarkdownMenu({url}: MarkdownMenuProps) {
   let mdUrl = (url ?? '').replace(/\.html?$/i, '') + '.md';
+  let [isCopied, setIsCopied] = useState(false);
+  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  
+  let pageUrl = typeof window !== 'undefined' && url ? new URL(url, window.location.origin).href : url ?? '';
+  let fullMdUrl = typeof window !== 'undefined' && mdUrl ? new URL(mdUrl, window.location.origin).href : mdUrl;
+  let library = url ? getLibraryLabel(getLibraryFromUrl(url)) : '';
+  let aiPrompt = `Answer questions about the following ${library} documentation page: ${pageUrl}\nMarkdown source: ${fullMdUrl}`;
+  let chatGptUrl = `https://chatgpt.com/?q=${encodeURIComponent(aiPrompt)}`;
+  let claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(aiPrompt)}`;
 
-  let onAction = useCallback(async (key: import('react-aria-components').Key) => {
-    let action = String(key);
-    switch (action) {
-      case 'copy': {
-        if (typeof navigator !== 'undefined' && navigator.clipboard) {
-          try {
-            let response = await fetch(mdUrl);
-            // Fallback to copying the URL if the request fails or isn't ok.
-            if (!response.ok) {
-              throw new Error('Failed to fetch markdown');
-            }
-
-            let markdown = await response.text();
-            await navigator.clipboard.writeText(markdown);
-          } catch {
-            // ignore failures (e.g., insecure context, network errors)
-          }
-        }
-        break;
+  useEffect(() => {
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
       }
-      case 'view': {
-        if (typeof window !== 'undefined') {
-          window.open(mdUrl, '_blank');
-        }
-        break;
+    };
+  }, []);
+
+  let handleCopy = useCallback(async () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      try {
+        let response = await fetch(mdUrl);
+        let markdown = await response.text();
+        await navigator.clipboard.writeText(markdown);
+        setIsCopied(true);
+        timeout.current = setTimeout(() => setIsCopied(false), 2000);
+      } catch {
+        ToastQueue.negative('Failed to copy markdown.');
       }
     }
   }, [mdUrl]);
 
   return (
-    <MenuTrigger>
-      <ActionButton size="L" isQuiet aria-label="Markdown options">
-        <Copy />
+    <div className={style({display: 'flex', justifyContent: 'space-between', paddingX: 4, paddingBottom: 16})}>
+      <ActionButton isQuiet size="M" onPress={handleCopy}>
+        {isCopied ? <CheckmarkCircle /> : <Copy />}
+        <Text>Copy for LLM</Text>
       </ActionButton>
-      <Menu onAction={onAction}>
-        <MenuItem id="copy">
-          <Copy />
-          <Text>Copy Page as Markdown</Text>
-        </MenuItem>
-        <MenuItem id="view">
-          <OpenIn />
-          <Text>View Page as Markdown</Text>
-        </MenuItem>
-      </Menu>
-    </MenuTrigger>
+      <MenuTrigger>
+        <ActionButton size="M" isQuiet aria-label="Markdown options">
+          <More />
+        </ActionButton>
+        <Menu>
+          <MenuItem id="view" href={mdUrl} target="_blank">
+            View as Markdown
+          </MenuItem>
+          <MenuItem id="chatgpt" href={chatGptUrl} target="_blank">
+            Open in ChatGPT
+          </MenuItem>
+          <MenuItem id="claude" href={claudeUrl} target="_blank">
+            Open in Claude
+          </MenuItem>
+        </Menu>
+      </MenuTrigger>
+    </div>
   );
 } 
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index e77f6553e37..93346e77e2c 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -3,10 +3,36 @@
 import {focusRing, size, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {getLibraryFromPage} from './library';
 import {Link} from 'react-aria-components';
-import type {PageProps} from '@parcel/rsc';
+import type {Page, PageProps} from '@parcel/rsc';
 import {Picker, pressScale} from '@react-spectrum/s2';
+import {prefetchRoute} from './prefetch';
 import React, {createContext, useContext, useEffect, useRef, useState} from 'react';
 
+export function PendingPageProvider({children, currentPage}: {children: React.ReactNode, currentPage: Page}) {
+  // Track pending navigation for optimistic UI updates
+  let [pendingPage, setPendingPage] = useState<Page | null>(null);
+  
+  // Reset pending state when navigation completes
+  useEffect(() => {
+    setPendingPage(null);
+  }, [currentPage.url]);
+  
+  useEffect(() => {
+    const unsubscribe = subscribeToClearPendingPage(() => {
+      setPendingPage(null);
+    });
+    return unsubscribe;
+  }, []);
+
+  return (
+    <PendingPageContext.Provider value={pendingPage}>
+      <PendingNavContext.Provider value={setPendingPage}>
+        {children}
+      </PendingNavContext.Provider>
+    </PendingPageContext.Provider>
+  );
+}
+
 export function Nav({pages, currentPage}: PageProps) {
   let currentLibrary = getLibraryFromPage(currentPage);
   let sections = new Map();
@@ -30,6 +56,8 @@ export function Nav({pages, currentPage}: PageProps) {
   }
 
   let [maskSize, setMaskSize] = useState(0);
+  let pendingPage = usePendingPage();
+  let displayUrl = pendingPage?.url ?? currentPage.url;
 
   let sortedSections = [...sections].sort((a, b) => {
     if (a[0] === 'Getting started') {
@@ -54,7 +82,7 @@ export function Nav({pages, currentPage}: PageProps) {
         maxHeight: 'calc(100vh - 72px)',
         overflow: 'auto',
         paddingX: 12,
-        minWidth: 180,
+        width: 200,
         display: {
           default: 'none',
           lg: 'block'
@@ -77,7 +105,7 @@ export function Nav({pages, currentPage}: PageProps) {
               })
               .filter(page => !page.exports?.isSubpage)
               .map(page => (
-                <SideNavItem key={page.url}><SideNavLink href={page.url} isSelected={page.url === currentPage.url}>{title(page)}</SideNavLink></SideNavItem>
+                <SideNavItem key={page.url}><SideNavLink href={page.url} page={page} isSelected={page.url === displayUrl}>{title(page)}</SideNavLink></SideNavItem>
             ))}
           </SideNav>
         </SideNavSection>
@@ -109,8 +137,27 @@ function SideNavSection({title, children}) {
 }
 
 const SideNavContext = createContext('');
+const PendingNavContext = createContext<((page: Page | null) => void) | 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 SideNav({children}) {
+export function clearPendingPage() {
+  clearPendingPageListeners.forEach(callback => callback());
+}
+
+export function usePendingPage() {
+  return useContext(PendingPageContext);
+}
+
+export function SideNav({children, isNested = false}) {
   return (
     <ul
       className={style({
@@ -120,13 +167,17 @@ export function SideNav({children}) {
           default: 0,
           ':is(li > ul)': 16
         },
+        paddingTop: {
+          default: 0,
+          isNested: 8
+        },
         margin: 0,
         display: 'flex',
         flexDirection: 'column',
         gap: 8,
         width: 'full',
         boxSizing: 'border-box'
-      })}>
+      })({isNested})}>
       {children}
     </ul>
   );
@@ -143,12 +194,25 @@ export function SideNavItem(props) {
 export function SideNavLink(props) {
   let linkRef = useRef(null);
   let selected = useContext(SideNavContext);
+  let setPendingPage = useContext(PendingNavContext);
+  let {page, ...linkProps} = props;
+  
   return (
     <Link
-      {...props}
+      {...linkProps}
       ref={linkRef}
       aria-current={props.isSelected || selected === props.href ? 'page' : undefined}
       style={pressScale(linkRef)}
+      onPressStart={() => {
+        if (props.href) {
+          prefetchRoute(props.href);
+        }
+      }}
+      onPress={() => {
+        if (setPendingPage && page) {
+          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
new file mode 100644
index 00000000000..5f6ff05bbc4
--- /dev/null
+++ b/packages/dev/s2-docs/src/NavigationSuspense.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import type {Page} from '@parcel/rsc';
+import {PageSkeleton} from './PageSkeleton';
+import React, {Suspense, use, useSyncExternalStore} from 'react';
+
+let navigationPromise: Promise<void> | null = null;
+let navigationResolve: (() => void) | null = null;
+let targetPathname: string | null = null;
+let listeners = new Set<() => void>();
+
+function subscribe(callback: () => void) {
+  listeners.add(callback);
+  return () => listeners.delete(callback);
+}
+
+function getSnapshot() {
+  return navigationPromise;
+}
+
+export function setNavigationLoading(loading: boolean, pathname?: string) {
+  if (loading) {
+    targetPathname = pathname || null;
+    navigationPromise = new Promise(resolve => {
+      navigationResolve = resolve;
+    });
+    listeners.forEach(callback => callback());
+  } else {
+    if (navigationResolve) {
+      navigationResolve();
+      navigationResolve = null;
+      navigationPromise = null;
+      listeners.forEach(callback => callback());
+    }
+  }
+}
+
+function normalizePathname(urlOrPathname: string, publicUrlPrefix: string): string {
+  let pathname: string;
+  if (urlOrPathname.startsWith('http://') || urlOrPathname.startsWith('https://')) {
+    try {
+      pathname = new URL(urlOrPathname).pathname;
+    } catch {
+      pathname = urlOrPathname;
+    }
+  } else {
+    pathname = urlOrPathname;
+  }
+  
+  const [basePathname] = pathname.split('?');
+  const [cleanPathname] = basePathname.split('#');
+  
+  let pathnameWithoutPrefix = cleanPathname;
+  if (publicUrlPrefix !== '/' && cleanPathname.startsWith(publicUrlPrefix)) {
+    pathnameWithoutPrefix = cleanPathname.slice(publicUrlPrefix.length);
+    if (!pathnameWithoutPrefix.startsWith('/')) {
+      pathnameWithoutPrefix = '/' + pathnameWithoutPrefix;
+    }
+  }
+  
+  return pathnameWithoutPrefix.startsWith('/') ? pathnameWithoutPrefix : '/' + pathnameWithoutPrefix;
+}
+
+function getPageInfo(pages: Page[], pathname: string | null): {title?: string, section?: string, hasToC?: boolean} {
+  if (!pathname) {
+    return {};
+  }
+  
+  let publicUrl = process.env.PUBLIC_URL || '/';
+  let publicUrlPathname = publicUrl.startsWith('http') ? new URL(publicUrl).pathname : publicUrl;
+  let publicUrlPrefix = publicUrlPathname === '/' ? '/' : publicUrlPathname.replace(/\/$/, '');
+  
+  let normalizedPathname = normalizePathname(pathname, publicUrlPrefix);
+  
+  const targetPage = pages.find(p => {
+    let normalizedPageUrl = normalizePathname(p.url, publicUrlPrefix);
+    
+    return normalizedPageUrl === normalizedPathname || 
+          normalizedPageUrl === normalizedPathname.replace(/\.html$/, '') ||
+          normalizedPageUrl === normalizedPathname + '.html';
+  });
+  
+  if (!targetPage) {
+    return {};
+  }
+  
+  // Extract the h1 title (same logic as getTitle but just the page title part)
+  const title = targetPage.tableOfContents?.[0]?.title ?? targetPage.name?.replace(/\.html$/, '');
+  const section = (targetPage.exports?.section as string) || 'Components';
+  const hasToC = !targetPage.exports?.hideNav && targetPage.tableOfContents?.[0]?.children && targetPage.tableOfContents?.[0]?.children?.length > 0;
+  
+  return {title, section, hasToC};
+}
+
+function NavigationContent({children}: {children: React.ReactNode}) {
+  // Subscribe to navigation promise changes to ensure React re-renders when setNavigationLoading(true) is called.
+  const promise = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (promise) {
+    use(promise);
+  }
+  return <>{children}</>;
+}
+
+export function NavigationSuspense({children, pages}: {children: React.ReactNode, pages: Page[]}) {
+  // Subscribe to get the latest targetPathname for skeleton page info
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const pageInfo = getPageInfo(pages, targetPathname);
+  
+  return (
+    <Suspense fallback={<PageSkeleton title={pageInfo.title} section={pageInfo.section} hasToC={pageInfo.hasToC} />}>
+      <NavigationContent>{children}</NavigationContent>
+    </Suspense>
+  );
+}
diff --git a/packages/dev/s2-docs/src/OptimisticToc.tsx b/packages/dev/s2-docs/src/OptimisticToc.tsx
new file mode 100644
index 00000000000..6a75d0c2135
--- /dev/null
+++ b/packages/dev/s2-docs/src/OptimisticToc.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import {Divider, PickerItem} from '@react-spectrum/s2';
+import {MarkdownMenu} from './MarkdownMenu';
+import {MobileOnPageNav, OnPageNav, SideNav, SideNavItem, SideNavLink, usePendingPage} from './Nav';
+import type {Page, TocNode} from '@parcel/rsc';
+import React from 'react';
+import {ScrollableToc} from './ScrollableToc';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+function anchorId(children) {
+  return children.replace(/\s/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase();
+}
+
+function Toc({toc, isNested = false}: {toc: TocNode[], isNested?: boolean}) {
+  return (
+    <OnPageNav>
+      <SideNav isNested={isNested}>
+        {toc.map((c, i) => (
+          <SideNavItem key={i}>
+            <SideNavLink href={'#' + anchorId(c.title)}>{c.title}</SideNavLink>
+            {c.children.length > 0 && <Toc toc={c.children} isNested />}
+          </SideNavItem>
+        ))}
+      </SideNav>
+    </OnPageNav>
+  );
+}
+
+function renderMobileToc(toc: TocNode[], seen = new Map()) {
+  return toc.map((c) => {
+    let href = c.level === 1 ? '#top' : '#' + anchorId(c.title);
+    if (seen.has(href)) {
+      seen.set(href, seen.get(href) + 1);
+      href += '-' + seen.get(href);
+    } else {
+      seen.set(href, 1);
+    }
+    return (<React.Fragment key={href}>
+      <PickerItem id={href} href={href}>{c.title}</PickerItem>
+      {c.children.length > 0 && renderMobileToc(c.children, seen)}
+    </React.Fragment>);
+  });
+}
+
+export function OptimisticToc({currentPage}: {currentPage: Page}) {
+  let pendingPage = usePendingPage();
+  let displayPage = pendingPage ?? currentPage;
+  
+  return (
+    <>
+      <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center', marginBottom: 4, flexShrink: 0})}>On this page</div>
+      <ScrollableToc>
+        <Toc toc={displayPage.tableOfContents?.[0]?.children ?? []} key={displayPage.url} />
+      </ScrollableToc>
+      <div className={style({flexShrink: 0})}>
+        <Divider size="S" styles={style({marginY: 12})} />
+        <MarkdownMenu url={currentPage.url} />
+      </div>
+    </>
+  );
+}
+
+export function OptimisticMobileToc({currentPage}: {currentPage: Page}) {
+  let pendingPage = usePendingPage();
+  let displayPage = pendingPage ?? currentPage;
+  
+  if ((displayPage.tableOfContents?.[0]?.children?.length ?? 0) <= 1) {
+    return null;
+  }
+  
+  return (
+    <MobileOnPageNav currentPage={currentPage}>
+      {renderMobileToc(displayPage.tableOfContents ?? [])}
+    </MobileOnPageNav>
+  );
+}
diff --git a/packages/dev/s2-docs/src/PageSkeleton.tsx b/packages/dev/s2-docs/src/PageSkeleton.tsx
new file mode 100644
index 00000000000..2c59cff79c6
--- /dev/null
+++ b/packages/dev/s2-docs/src/PageSkeleton.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import {getTextWidth} from './textWidth';
+import React from 'react';
+import {Skeleton, Text} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+const h1 = style({
+  font: 'heading-3xl',
+  fontSize: {
+    // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
+    default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
+    lg: 'heading-3xl'
+  },
+  marginY: 0
+});
+
+const skeletonPageDescription = style({
+  font: {default: 'body-lg', lg: 'body-xl'},
+  marginY: 24,
+  width: '100%'
+});
+
+const skeletonParagraph = style({
+  font: {default: 'body', lg: 'body-lg'},
+  marginY: 24,
+  width: '100%'
+});
+
+const skeletonH2 = style({
+  font: 'heading-xl',
+  marginTop: 48,
+  marginBottom: 16,
+  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} />
+  );
+}
+
+const skeletonArticle = style({
+  maxWidth: {
+    default: 'none',
+    isWithToC: 768
+  },
+  width: 'full',
+  height: 'fit'
+});
+
+export function PageSkeleton({title, section, hasToC}: {title?: string, section?: string, hasToC?: boolean}) {
+  const isComponents = section === 'Components';
+  
+  return (
+    <article className={skeletonArticle({isWithToC: hasToC})}>
+      {title && (
+        <h1 id="top" style={{'--width-per-em': getTextWidth(title)} as any} className={h1}>
+          {title}
+        </h1>
+      )}
+      <Skeleton isLoading>
+        {!title && (
+          <h1 className={style({font: 'heading-3xl', fontSize: {default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)', lg: 'heading-3xl'}, marginY: 0, width: '60%'})}>
+            <Text>Page Title</Text>
+          </h1>
+        )}
+        
+        {/* PageDescription */}
+        <p className={skeletonPageDescription}>
+          <Text>This is placeholder content for the page description that approximates the typical length of component descriptions.</Text>
+        </p>
+        
+        {isComponents ? (
+          <>
+            {/* VisualExample */}
+            <SkeletonVisualExample />
+            
+            {/* A few sections with visual examples */}
+            {[1, 2, 3].map(i => (
+              <React.Fragment key={i}>
+                <h2 className={skeletonH2}>
+                  <Text>Section Heading</Text>
+                </h2>
+                <p className={skeletonParagraph}>
+                  <Text>Placeholder content for a section that describes various aspects of the component or feature being documented.</Text>
+                </p>
+                <SkeletonVisualExample />
+              </React.Fragment>
+            ))}
+          </>
+        ) : (
+          <>
+            {/* A few sections */}
+            {[1, 2, 3, 4].map(i => (
+              <React.Fragment key={i}>
+                <h2 className={skeletonH2}>
+                  <Text>Section Heading</Text>
+                </h2>
+                <p className={skeletonParagraph}>
+                  <Text>Placeholder content for a section that describes various aspects of the topic being documented.</Text>
+                </p>
+              </React.Fragment>
+            ))}
+          </>
+        )}
+      </Skeleton>
+    </article>
+  );
+}
diff --git a/packages/dev/s2-docs/src/ScrollableToc.tsx b/packages/dev/s2-docs/src/ScrollableToc.tsx
new file mode 100644
index 00000000000..7fb8dcba7a6
--- /dev/null
+++ b/packages/dev/s2-docs/src/ScrollableToc.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React, {useEffect, useRef, useState} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+export function ScrollableToc({children}) {
+  let [topMaskSize, setTopMaskSize] = useState(0);
+  let [bottomMaskSize, setBottomMaskSize] = useState(0);
+  let scrollRef = useRef<HTMLDivElement>(null);
+
+  let updateMasks = (element: HTMLDivElement) => {
+    let scrollTop = element.scrollTop;
+    let scrollHeight = element.scrollHeight;
+    let clientHeight = element.clientHeight;
+    let distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    
+    setTopMaskSize(Math.min(scrollTop, 32));
+    setBottomMaskSize(Math.min(distanceFromBottom, 32));
+  };
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      updateMasks(scrollRef.current);
+    }
+  }, [children]);
+
+  return (
+    <div
+      ref={scrollRef}
+      onScroll={e => updateMasks(e.currentTarget)}
+      style={{
+        maskImage: [
+          topMaskSize > 0 ? `linear-gradient(to bottom, transparent, black ${topMaskSize}px)` : null,
+          bottomMaskSize > 0 ? `linear-gradient(to top, transparent, black ${bottomMaskSize}px)` : null
+        ].filter(Boolean).join(', ') || undefined
+      }}
+      className={style({
+        overflowY: 'auto',
+        flex: 1,
+        minHeight: 0
+      })}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 001a0bdac1e..924bf1aca91 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -310,6 +310,18 @@ export function SearchMenu(props: SearchMenuProps) {
       || 'Items';
   }, [filteredComponents, sections, selectedSectionId, searchValue]);
 
+  useEffect(() => {
+    const handleNavigation = () => {
+      setSearchValue('');
+      onClose();
+    };
+
+    window.addEventListener('rsc-navigation', handleNavigation);
+    return () => {
+      window.removeEventListener('rsc-navigation', handleNavigation);
+    };
+  }, [onClose]);
+
   return (
     <Dialog id={overlayId} className={style({height: 'full'})} aria-label="Search menu">
       <Tabs
@@ -399,10 +411,6 @@ export function SearchMenu(props: SearchMenuProps) {
                     </Suspense>
                   ) : (
                     <ComponentCardView
-                      onAction={() => {
-                        setSearchValue('');
-                        onClose();
-                      }}
                       items={selectedItems.map(item => ({
                         id: item.id,
                         name: item.name,
diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
index a955a049d6f..38294e1ceeb 100644
--- a/packages/dev/s2-docs/src/client.tsx
+++ b/packages/dev/s2-docs/src/client.tsx
@@ -1,7 +1,11 @@
 'use client-entry';
 
+import {clearPendingPage} from './Nav';
 import {fetchRSC, hydrate} from '@parcel/rsc/client';
-import type {ReactElement} from 'react';
+import {getPrefetchedPromise} from './prefetch';
+import {type ReactElement} from 'react';
+import {setNavigationLoading} from './NavigationSuspense';
+import {UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
 
 // Hydrate initial RSC payload embedded in the HTML.
 let updateRoot = hydrate({
@@ -15,8 +19,53 @@ let updateRoot = hydrate({
 // and in a React transition, stream in the new page. Once complete, we'll pushState to
 // update the URL in the browser.
 async function navigate(pathname: string, push = false) {
+  let loadingShown = false;
+  let [basePath] = pathname.split('#');
+  let rscPath = basePath.replace('.html', '.rsc');
+  
+  // Use prefetched result if available, otherwise fetch
+  const prefetchedPromise = getPrefetchedPromise(rscPath);
+  const fetchPromise = prefetchedPromise ?? fetchRSC<ReactElement>(rscPath);
+  
+  const delayPromise = new Promise<void>(resolve => setTimeout(resolve, 50));
+  
+  // Race the fetch against a small delay to detect cached responses
+  // If fetch resolves before the delay, we won't show the skeleton
+  let raceResult: 'fast' | 'slow' | 'error' = 'slow';
   try {
-    let res = await fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));
+    raceResult = await Promise.race([
+      fetchPromise.then(() => 'fast' as const).catch(() => 'error' as const),
+      delayPromise.then(() => 'slow' as const)
+    ]);
+  } catch {
+    raceResult = 'error';
+  }
+  
+  if (raceResult === 'slow') {
+    setNavigationLoading(true, pathname);
+    loadingShown = true;
+  }
+  
+  if (raceResult === 'error') {
+    clearPendingPage();
+    if (loadingShown) {
+      setNavigationLoading(false);
+    }
+    try {
+      let errorRes = await fetchRSC<ReactElement>('/error.rsc');
+      updateRoot(errorRes, () => {
+        if (push) {
+          history.pushState(null, '', '/error.html');
+        }
+      });
+    } catch {
+      ToastQueue.negative('Failed to load page. Check your connection and try again.');
+    }
+    return;
+  }
+  
+  try {
+    let res = await fetchPromise;
     let currentPath = location.pathname;
     let [newBasePath, newPathAnchor] = pathname.split('#');
 
@@ -35,14 +84,32 @@ async function navigate(pathname: string, push = false) {
           element.scrollIntoView();
         }
       }
+
+      queueMicrotask(() => {
+        window.dispatchEvent(new CustomEvent('rsc-navigation'));
+        if (loadingShown) {
+          setNavigationLoading(false);
+        }
+      });
     });
   } catch {
-    let errorRes = await fetchRSC<ReactElement>('/error.rsc');
-    updateRoot(errorRes, () => {
-      if (push) {
-        history.pushState(null, '', '/error.html');
+    clearPendingPage();
+    try {
+      let errorRes = await fetchRSC<ReactElement>('/error.rsc');
+      updateRoot(errorRes, () => {
+        if (push) {
+          history.pushState(null, '', '/error.html');
+        }
+        if (loadingShown) {
+          setNavigationLoading(false);
+        }
+      });
+    } catch {
+      if (loadingShown) {
+        setNavigationLoading(false);
       }
-    });
+      ToastQueue.negative('Failed to load page. Check your connection and try again.');
+    }
   }
 }
 
diff --git a/packages/dev/s2-docs/src/footer.css b/packages/dev/s2-docs/src/footer.css
new file mode 100644
index 00000000000..f279bcafd6b
--- /dev/null
+++ b/packages/dev/s2-docs/src/footer.css
@@ -0,0 +1,8 @@
+footer li:after {
+  margin: 0 8px;
+  content: '/';
+}
+
+footer li:last-child:after {
+  content: '';
+}
diff --git a/packages/dev/s2-docs/src/prefetch.ts b/packages/dev/s2-docs/src/prefetch.ts
new file mode 100644
index 00000000000..8af310f06d4
--- /dev/null
+++ b/packages/dev/s2-docs/src/prefetch.ts
@@ -0,0 +1,35 @@
+'use client';
+
+import {fetchRSC} from '@parcel/rsc/client';
+import {type ReactElement} from 'react';
+
+const prefetchedRoutes = new Set<string>();
+const prefetchPromises = new Map<string, Promise<ReactElement>>();
+
+export function prefetchRoute(pathname: string) {
+  let [basePath] = pathname.split('#');
+  let rscPath = basePath.replace('.html', '.rsc');
+  
+  // Skip if already prefetched or currently prefetching
+  if (prefetchedRoutes.has(rscPath) || prefetchPromises.has(rscPath)) {
+    return;
+  }
+  
+  // Start prefetch and cache the promise
+  const prefetchPromise = fetchRSC<ReactElement>(rscPath)
+    .then(res => {
+      prefetchedRoutes.add(rscPath);
+      prefetchPromises.delete(rscPath);
+      return res;
+    })
+    .catch(() => {
+      prefetchPromises.delete(rscPath);
+      return Promise.reject<ReactElement>(new Error('Prefetch failed'));
+    });
+  
+  prefetchPromises.set(rscPath, prefetchPromise);
+}
+
+export function getPrefetchedPromise(rscPath: string): Promise<ReactElement> | undefined {
+  return prefetchPromises.get(rscPath);
+}