🚀 Feature Request: docs.copilotkit.ai: show a progress bar during client navigations · Issue #7823 · CopilotKit/CopilotKit · GitHub
Skip to content

🚀 Feature Request: docs.copilotkit.ai: show a progress bar during client navigations #7823

Open

Description

@Laptopmini

Pre-flight Checklist

  • I have searched existing issues, and this hasn't been requested yet.

Problem or Motivation

On docs.copilotkit.ai, clicking a link gives no feedback until the next page has arrived. The docs routes are force-dynamic (deliberately, so unknown slugs return real 404s), and there's no loading.tsx, so the App Router keeps the old page on screen with nothing to show a navigation started. On a first visit I clicked a link and thought the site wasn't responding.

The worst case is the 40 MB chunk in #<issue 1 number>, which turns navigations into multi-second waits. Fixing that brings them down to about 200 ms locally. Even so, any slow network or server response still gives no feedback, so an indicator is worth having on its own.

🎤 Tell us your idea

A thin progress bar for router navigations, using @bprogress/next (MIT; the maintained successor of next-nprogress-bar and nextjs-toploader). It's a small client <NavigationProgress> wrapping the app inside Fumadocs' RootProvider.

  • Theme colors: color="var(--color-fd-primary)". That's the docs theme's primary token, so the bar follows light and dark mode with no extra config. .dark swaps --primary, which --color-fd-primary resolves through. Measured computed colors: light lab(32.4 49.2 -84.7), dark lab(55.4 29.8 -74.1), each matching the page's primary.
  • Placement: drawn along the bottom edge of the brand nav, not at the top of the viewport. At the top it sits on the purple announcement banner and is nearly invisible. bprogress's parent option mounts it into a zero-height anchor after <BrandNav />, plus two CSS rules.
  • delay={150}, so fast navigations don't flash the bar; spinner off; 2px.

I've prototyped it against main: npm run typecheck and npm run test:ci (502 tests) pass. In headless Chromium on a throttled network, the bar appears about 220 ms after a click, in the theme color in both modes, and disappears once the page arrives. Screenshots of light and dark mode are attached.

Note: @bprogress/next 3.2.12 declares next >=13, and its repo was last updated in May 2025. I've only verified it with this app's Next 16.2.6, as above. Happy to use a small in-house component instead if you'd rather not add the dependency.

Would you like to work on this?

  • Yes, I’d love to work on it!
  • I’m open to collaborating but need guidance.
  • No, I’m just sharing the idea.

Activity

  1. copilotkit-outpost-bot commented on Oct 14, 2026

    @copilotkit-outpost-bot

    ⚠️ This is an AI-generated response. We've escalated this to our engineering team — someone will follow up in this thread shortly.

    This is a docs-site UX improvement, not a CopilotKit framework question — the team will need to evaluate the dependency choice and placement approach directly. Escalating to the maintainers.


    🤖 Generated by CopilotKit AI Support · Documentation


    Was this helpful? React with 👍 or 👎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions