Merge pull request #281 from ethpandaops/feat/router-viewport-preloading

feat: add viewport preloading to improve navigation performance

Author: Savid

.storybook/preview.tsx

@@ -110,6 +110,7 @@ const preview: Preview = {
         history: createMemoryHistory({
           initialEntries: [initialUrl + searchString],
         }),
+        defaultPendingMinMs: 0,
       });
 
       return (

src/components/Layout/Sidebar/Sidebar.tsx

@@ -122,6 +122,8 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps): JSX.Elem
                           <ListItem key={page.to}>
                             <Link
                               to={page.to}
+                              preload="viewport"
+                              preloadDelay={100}
                               className="group flex gap-x-3 rounded-lg px-2.5 py-2 text-base font-semibold text-muted transition-all hover:bg-primary/10 hover:text-primary lg:py-1.5 lg:text-sm/6"
                               activeProps={{
                                 className: 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20',
@@ -140,6 +142,8 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps): JSX.Elem
                           <ListItem key={page.to}>
                             <Link
                               to={page.to}
+                              preload="viewport"
+                              preloadDelay={100}
                               className="group flex gap-x-3 rounded-lg px-2.5 py-2 text-base font-semibold text-muted transition-all hover:bg-primary/10 hover:text-primary lg:py-1.5 lg:text-sm/6"
                               activeProps={{
                                 className: 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20',
@@ -158,6 +162,8 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps): JSX.Elem
                           <ListItem key={page.to}>
                             <Link
                               to={page.to}
+                              preload="viewport"
+                              preloadDelay={100}
                               className="group flex gap-x-3 rounded-lg px-2.5 py-2 text-base font-semibold text-muted transition-all hover:bg-primary/10 hover:text-primary lg:py-1.5 lg:text-sm/6"
                               activeProps={{
                                 className: 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20',
@@ -178,6 +184,8 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps): JSX.Elem
                         <ListItem key={page.to}>
                           <Link
                             to={page.to}
+                            preload="viewport"
+                            preloadDelay={100}
                             className="group flex gap-x-3 rounded-lg px-2.5 py-2 text-base font-semibold text-muted transition-all hover:bg-primary/10 hover:text-primary lg:py-1.5 lg:text-sm/6"
                             activeProps={{
                               className: 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20',
@@ -229,6 +237,8 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps): JSX.Elem
                       <ListItem key={page.to}>
                         <Link
                           to={page.to}
+                          preload="viewport"
+                          preloadDelay={100}
                           className="group flex gap-x-3 px-2.5 py-1.5 text-sm/6 font-semibold text-muted transition-all hover:bg-primary/10 hover:text-primary"
                           activeProps={{
                             className: 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20',
@@ -247,6 +257,8 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps): JSX.Elem
                       <ListItem key={page.to}>
                         <Link
                           to={page.to}
+                          preload="viewport"
+                          preloadDelay={100}
                           className="group flex gap-x-3 px-2.5 py-1.5 text-sm/6 font-semibold text-muted transition-all hover:bg-primary/10 hover:text-primary"
                           activeProps={{
                             className: 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20',
@@ -265,6 +277,8 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps): JSX.Elem
                       <ListItem key={page.to}>
                         <Link
                           to={page.to}
+                          preload="viewport"
+                          preloadDelay={100}
                           className="group flex gap-x-3 px-2.5 py-1.5 text-sm/6 font-semibold text-muted transition-all hover:bg-primary/10 hover:text-primary"
                           activeProps={{
                             className: 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20',
@@ -285,6 +299,8 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps): JSX.Elem
                     <ListItem key={page.to}>
                       <Link
                         to={page.to}
+                        preload="viewport"
+                        preloadDelay={100}
                         className="group flex gap-x-3 px-2.5 py-1.5 text-sm/6 font-semibold text-muted transition-all hover:bg-primary/10 hover:text-primary"
                         activeProps={{
                           className: 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20',

src/components/Overlays/FeatureGate/FeatureGate.stories.tsx

@@ -128,6 +128,7 @@ export const Default: Story = {
       history: createMemoryHistory({
         initialEntries: ['/ethereum/data-availability/custody?network=mainnet'],
       }),
+      defaultPendingMinMs: 0,
     });
 
     return (

src/main.tsx

@@ -16,6 +16,9 @@ const router = createRouter({
   defaultErrorComponent: FatalError,
   defaultNotFoundComponent: NotFound,
   scrollRestoration: true,
+  defaultPendingMinMs: 0, // https://github.com/TanStack/router/discussions/1765#discussioncomment-10046260
+  defaultPreload: 'intent', // preload on hover/touch
+  defaultPreloadDelay: 50, // wait 50ms before preloading (prevents accidental hovers)
 });
 
 // Register the router instance for type safety

src/pages/ethereum/live/components/MobileSlotHeader/MobileSlotHeader.tsx

@@ -30,13 +30,17 @@ function MobileSlotHeaderComponent({
         <div className="flex flex-col">
           <Link
             to="/ethereum/slots/$slot"
+            preload="viewport"
+            preloadDelay={100}
             params={{ slot: currentSlot.toString() }}
             className="text-lg font-bold text-foreground hover:text-primary"
           >
             Slot <Slot slot={currentSlot} noLink />
           </Link>
           <Link
             to="/ethereum/epochs/$epoch"
+            preload="viewport"
+            preloadDelay={100}
             params={{ epoch: epoch.toString() }}
             className="text-xs text-muted hover:text-primary"
           >