Add navigation progress bar for slow connections

src/ui/src/components/chrome/chrome.tsx

@@ -20,6 +20,7 @@ import { memo, Suspense } from "react";
 import { AppSidebar } from "@/components/chrome/app-sidebar";
 import { Header } from "@/components/chrome/header";
 import { SIDEBAR_CSS_VARS } from "@/components/chrome/constants";
+import { NavigationProgress } from "@/components/navigation-progress";
 import { Skeleton } from "@/components/shadcn/skeleton";
 import { TableSkeleton } from "@/components/data-table/table-skeleton";
 import { SidebarInset, SidebarProvider } from "@/components/shadcn/sidebar";
@@ -36,43 +37,46 @@ export const Chrome = memo(function Chrome({ children }: ChromeProps) {
   const setSidebarOpen = useSharedPreferences((s) => s.setSidebarOpen);
 
   return (
-    <Suspense fallback={<ChromeSkeleton>{children}</ChromeSkeleton>}>
-      <SidebarProvider
-        open={sidebarOpen}
-        onOpenChange={setSidebarOpen}
-        className="h-screen overflow-y-hidden"
-        style={SIDEBAR_CSS_VARS as React.CSSProperties}
-      >
-        {/* Skip to main content link - WCAG 2.1 bypass block */}
-        <a
-          href="#main-content"
-          className="focus:bg-nvidia sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:m-2 focus:rounded-md focus:px-4 focus:py-2 focus:text-black focus:outline-none"
+    <>
+      <NavigationProgress />
+      <Suspense fallback={<ChromeSkeleton>{children}</ChromeSkeleton>}>
+        <SidebarProvider
+          open={sidebarOpen}
+          onOpenChange={setSidebarOpen}
+          className="h-screen overflow-y-hidden"
+          style={SIDEBAR_CSS_VARS as React.CSSProperties}
         >
-          Skip to main content
-        </a>
+          {/* Skip to main content link - WCAG 2.1 bypass block */}
+          <a
+            href="#main-content"
+            className="focus:bg-nvidia sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:m-2 focus:rounded-md focus:px-4 focus:py-2 focus:text-black focus:outline-none"
+          >
+            Skip to main content
+          </a>
 
-        {/* Sidebar */}
-        <AppSidebar />
+          {/* Sidebar */}
+          <AppSidebar />
 
-        {/* Main area - flex to fill remaining space */}
-        <SidebarInset className="flex flex-col overflow-y-hidden">
-          {/* Header */}
-          <Header />
+          {/* Main area - flex to fill remaining space */}
+          <SidebarInset className="flex flex-col overflow-y-hidden">
+            {/* Header */}
+            <Header />
 
-          {/* Content - with optimized scrolling */}
-          {/* Note: Pages are responsible for their own padding. This allows pages */}
-          {/* with edge-to-edge layouts (like resizable panels) to use full space. */}
-          <main
-            id="main-content"
-            tabIndex={-1}
-            className="contain-layout-style flex-1 overflow-auto overscroll-contain bg-zinc-50 dark:bg-zinc-900"
-            aria-label="Main content"
-          >
-            <Suspense fallback={<MainContentSkeleton />}>{children}</Suspense>
-          </main>
-        </SidebarInset>
-      </SidebarProvider>
-    </Suspense>
+            {/* Content - with optimized scrolling */}
+            {/* Note: Pages are responsible for their own padding. This allows pages */}
+            {/* with edge-to-edge layouts (like resizable panels) to use full space. */}
+            <main
+              id="main-content"
+              tabIndex={-1}
+              className="contain-layout-style flex-1 overflow-auto overscroll-contain bg-zinc-50 dark:bg-zinc-900"
+              aria-label="Main content"
+            >
+              <Suspense fallback={<MainContentSkeleton />}>{children}</Suspense>
+            </main>
+          </SidebarInset>
+        </SidebarProvider>
+      </Suspense>
+    </>
   );
 });
 

src/ui/src/components/chrome/header.tsx

@@ -32,7 +32,8 @@ import { useUser } from "@/lib/auth/user-context";
 import { useVersion } from "@/lib/api/adapter/hooks";
 import { usePageConfig, type BreadcrumbSegment } from "@/components/chrome/page-context";
 import { useBreadcrumbOrigin } from "@/components/chrome/breadcrumb-origin-context";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 
 export function Header() {
   const { user, isLoading, logout } = useUser();
@@ -169,7 +170,7 @@ function VersionMenuItem() {
 
 /** Navigates to stored origin (with filters) if available, otherwise uses default href */
 function BreadcrumbItem({ segment }: { segment: BreadcrumbSegment }) {
-  const router = useRouter();
+  const router = useNavigationRouter();
   const pathname = usePathname();
   const { getOrigin } = useBreadcrumbOrigin();
 

src/ui/src/components/link.tsx

@@ -15,8 +15,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useViewTransition } from "@/hooks/use-view-transition";
+import { startProgressIfNavigating } from "@/lib/navigation-progress";
 import NextLink from "next/link";
 import { useCallback, type ComponentProps } from "react";
+import { usePathname } from "next/navigation";
 
 /**
  * Custom Link wrapper that disables prefetching by default and supports View Transitions.
@@ -34,32 +36,25 @@ import { useCallback, type ComponentProps } from "react";
  */
 export function Link({ prefetch = false, onClick, ...props }: ComponentProps<typeof NextLink>) {
   const { startTransition } = useViewTransition();
+  const currentPathname = usePathname();
 
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement>) => {
-      // Call original onClick if provided
       onClick?.(e);
 
-      // If default was prevented or it's a special click (cmd/ctrl), don't intercept
       if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
         return;
       }
 
-      // Only transition for internal links
       const href = props.href.toString();
       const isInternal = href.startsWith("/") || href.startsWith(window.location.origin);
 
       if (isInternal) {
-        // We don't prevent default because NextLink needs to handle the actual navigation.
-        // Instead, we just wrap the start of the transition.
-        // Note: This is a "best effort" transition for route changes.
-        startTransition(() => {
-          // No-op callback, the actual DOM update happens via Next.js navigation
-          // which is triggered by the default link behavior.
-        });
+        startProgressIfNavigating(href, currentPathname);
+        startTransition(() => {});
       }
     },
-    [onClick, props.href, startTransition],
+    [onClick, props.href, startTransition, currentPathname],
   );
 
   return (

src/ui/src/components/navigation-progress.tsx

@@ -0,0 +1,55 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION. All rights reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// SPDX-License-Identifier: Apache-2.0
+
+"use client";
+
+import { useEffect, useRef } from "react";
+import { usePathname } from "next/navigation";
+import { useNavigationProgress } from "@/stores/navigation-progress-store";
+
+/**
+ * Top-of-viewport progress bar that provides visual feedback during route navigations.
+ *
+ * Mimics the browser's native loading indicator for client-side navigations.
+ * Uses pure CSS animations (GPU-accelerated scaleX) for smooth performance.
+ *
+ * Lifecycle:
+ *   1. Link click → store.start() → bar appears, animates toward 80%
+ *   2. Route resolves → usePathname() changes → store.done() → bar fills to 100%, fades out
+ *   3. After fade → store resets to idle
+ */
+export function NavigationProgress() {
+  const status = useNavigationProgress((s) => s.status);
+  const done = useNavigationProgress((s) => s.done);
+  const pathname = usePathname();
+  const previousPathname = useRef(pathname);
+
+  useEffect(() => {
+    if (pathname !== previousPathname.current) {
+      previousPathname.current = pathname;
+      done();
+    }
+  }, [pathname, done]);
+
+  return (
+    <div
+      className="nav-progress"
+      data-status={status}
+      role="progressbar"
+      aria-hidden={status === "idle"}
+    />
+  );
+}

src/ui/src/features/datasets/list/components/datasets-page-content.tsx

@@ -38,7 +38,7 @@ import { usePanelLifecycle } from "@/components/panel/hooks/use-panel-lifecycle"
 import { usePanelWidth } from "@/components/panel/hooks/use-panel-width";
 import { useViewTransition } from "@/hooks/use-view-transition";
 import { useCallback, useMemo } from "react";
-import { useRouter } from "next/navigation";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import { DatasetsDataTable } from "@/features/datasets/list/components/table/datasets-data-table";
 import { DatasetsToolbar } from "@/features/datasets/list/components/toolbar/datasets-toolbar";
 import { DatasetPanel } from "@/features/datasets/list/components/panel/dataset-panel";
@@ -66,7 +66,7 @@ interface DatasetsPageContentProps {
 export function DatasetsPageContent({ initialUsername }: DatasetsPageContentProps) {
   usePage({ title: "Datasets" });
   const { startTransition: startViewTransition } = useViewTransition();
-  const router = useRouter();
+  const router = useNavigationRouter();
   const { user } = useUser();
 
   const currentUsername = initialUsername ?? user?.username ?? null;

src/ui/src/features/datasets/list/components/table/datasets-data-table.tsx

@@ -28,7 +28,8 @@
 "use client";
 
 import { useMemo, useCallback, useRef, memo } from "react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import { useViewTransition } from "@/hooks/use-view-transition";
 import { DataTable } from "@/components/data-table/data-table";
 import { TableEmptyState } from "@/components/data-table/table-empty-state";
@@ -126,7 +127,7 @@ export const DatasetsDataTable = memo(function DatasetsDataTable({
   onLoadMore,
   isFetchingNextPage = false,
 }: DatasetsDataTableProps) {
-  const router = useRouter();
+  const router = useNavigationRouter();
   const pathname = usePathname();
   const { startTransition } = useViewTransition();
   const { setOrigin } = useBreadcrumbOrigin();

src/ui/src/features/log-viewer/workflow-selector.tsx

@@ -17,7 +17,7 @@
 "use client";
 
 import { useState, useCallback, FormEvent, useId, MouseEvent } from "react";
-import { useRouter } from "next/navigation";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import { Search, Clock, AlertCircle, X, ArrowRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { usePage } from "@/components/chrome/page-context";
@@ -32,7 +32,7 @@ interface WorkflowSelectorProps {
 }
 
 export function WorkflowSelector({ error, initialWorkflowId = "" }: WorkflowSelectorProps) {
-  const router = useRouter();
+  const router = useNavigationRouter();
   const [workflowId, setWorkflowId] = useState(() => initialWorkflowId);
   const [recentWorkflows, setRecentWorkflows] = useState<string[]>(() => getRecentWorkflows());
   const workflowInputId = useId();

src/ui/src/features/resources/components/panel/panel-content.tsx

@@ -17,7 +17,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import { ArrowUpRight } from "lucide-react";
 import { Card, CardContent } from "@/components/shadcn/card";
 import { Badge } from "@/components/shadcn/badge";
@@ -45,7 +45,7 @@ export function ResourcePanelContent({
   selectedPool: initialSelectedPool,
   onPoolSelect,
 }: ResourcePanelContentProps) {
-  const router = useRouter();
+  const router = useNavigationRouter();
   const { startTransition } = useViewTransition();
 
   const { pools, initialPool, taskConfigByPool, isLoadingPools, error, refetch } = useResourceDetail(

src/ui/src/features/workflows/detail/components/resubmit/use-resubmit-form.ts

@@ -24,7 +24,7 @@
 "use client";
 
 import { useState, useCallback, useMemo } from "react";
-import { useRouter } from "next/navigation";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import { toast } from "sonner";
 import type { WorkflowQueryResponse } from "@/lib/api/adapter/types";
 import { WorkflowPriority } from "@/lib/api/generated";
@@ -86,7 +86,7 @@ function deriveInitialPriority(workflow: WorkflowQueryResponse): WorkflowPriorit
 }
 
 export function useResubmitForm({ workflow, onSuccess }: UseResubmitFormOptions): UseResubmitFormReturn {
-  const router = useRouter();
+  const router = useNavigationRouter();
 
   const [pool, setPool] = useState(() => workflow.pool ?? "");
   const [priority, setPriority] = useState<WorkflowPriority>(() => deriveInitialPriority(workflow));

src/ui/src/features/workflows/list/components/table/workflows-data-table.tsx

@@ -29,7 +29,8 @@
 "use client";
 
 import { useMemo, useCallback, memo } from "react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import { useViewTransition } from "@/hooks/use-view-transition";
 import { DataTable } from "@/components/data-table/data-table";
 import { TableEmptyState } from "@/components/data-table/table-empty-state";
@@ -96,7 +97,7 @@ export const WorkflowsDataTable = memo(function WorkflowsDataTable({
   onLoadMore,
   isFetchingNextPage = false,
 }: WorkflowsDataTableProps) {
-  const router = useRouter();
+  const router = useNavigationRouter();
   const pathname = usePathname();
   const { startTransition } = useViewTransition();
   const { setOrigin } = useBreadcrumbOrigin();

src/ui/src/hooks/use-navigation-router.ts

@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION. All rights reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// SPDX-License-Identifier: Apache-2.0
+
+"use client";
+
+import { useRouter, usePathname } from "next/navigation";
+import { startProgressIfNavigating } from "@/lib/navigation-progress";
+
+/**
+ * Drop-in replacement for `useRouter()` that automatically triggers the
+ * navigation progress bar on `push` and `replace` calls.
+ *
+ * ```ts
+ * const router = useNavigationRouter();
+ * router.push("/workflows/detail");
+ * ```
+ */
+export function useNavigationRouter() {
+  const router = useRouter();
+  const currentPathname = usePathname();
+
+  const push: typeof router.push = (...args) => {
+    startProgressIfNavigating(args[0] as string, currentPathname);
+    router.push(...args);
+  };
+
+  const replace: typeof router.replace = (...args) => {
+    startProgressIfNavigating(args[0] as string, currentPathname);
+    router.replace(...args);
+  };
+
+  return {
+    ...router,
+    push,
+    replace,
+  };
+}