feat(v5): Navigation progress bar (#1204)

* s

* changelog

Author: brendan-kellam

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Added warning message that fires on startup when host environment contains env vars that simple-git flags as unsafe. [#1193](https://github.com/sourcebot-dev/sourcebot/pull/1193)
 - Added a loading skeleton to the latest commit info bar in the code browser. [#1195](https://github.com/sourcebot-dev/sourcebot/pull/1195)
+- Added progress bar when navigating between pages. [#1204](https://github.com/sourcebot-dev/sourcebot/pull/1204)
 
 ### Fixed
 - Add missing schema changes introduced in [#1170](https://github.com/sourcebot-dev/sourcebot/pull/1170). [#1176](https://github.com/sourcebot-dev/sourcebot/pull/1176)

packages/web/package.json

@@ -27,6 +27,7 @@
     "@ai-sdk/xai": "^3.0.83",
     "@auth/prisma-adapter": "^2.11.1",
     "@aws-sdk/credential-providers": "^3.1036.0",
+    "@bprogress/next": "^3.2.12",
     "@codemirror/commands": "^6.6.0",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-css": "^6.3.0",

packages/web/src/app/(app)/browse/components/pureFileTreePanel.tsx

@@ -6,6 +6,7 @@ import React, { useCallback, useMemo, useRef } from "react";
 import { FileTreeItemComponent } from "./fileTreeItemComponent";
 import { getBrowsePath } from "@/app/(app)/browse/hooks/utils";
 import { useBrowseParams } from "@/app/(app)/browse/hooks/useBrowseParams";
+import { useProgress } from "@bprogress/next";
 
 const renderLoadingSkeleton = (depth: number) => {
     return (
@@ -27,6 +28,7 @@ interface PureFileTreePanelProps {
 export const PureFileTreePanel = ({ tree, openPaths, path, onTreeNodeClicked }: PureFileTreePanelProps) => {
     const scrollAreaRef = useRef<HTMLDivElement>(null);
     const { repoName, revisionName } = useBrowseParams();
+    const { stop } = useProgress();
 
     const renderTree = useCallback((nodes: FileTreeNode, depth = 0): React.ReactNode => {
         return (
@@ -61,6 +63,7 @@ export const PureFileTreePanel = ({ tree, openPaths, path, onTreeNodeClicked }:
                                 onNavigate={(e) => {
                                     if (node.type === 'tree') {
                                         e.preventDefault();
+                                        stop();
                                     }
                                 }}
                                 parentRef={scrollAreaRef}
@@ -77,7 +80,7 @@ export const PureFileTreePanel = ({ tree, openPaths, path, onTreeNodeClicked }:
                 })}
             </>
         );
-    }, [onTreeNodeClicked, path, repoName, revisionName, openPaths]);
+    }, [onTreeNodeClicked, path, repoName, revisionName, openPaths, stop]);
 
     const renderedTree = useMemo(() => renderTree(tree), [tree, renderTree]);
 

packages/web/src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Script from "next/script";
 import "./globals.css";
 import { ThemeProvider } from "next-themes";
+import { ProgressBarProvider } from "./progressBarProvider";
 import { QueryClientProvider } from "./queryClientProvider";
 import { PostHogProvider } from "./posthogProvider";
 import { Toaster } from "@/components/ui/toaster";
@@ -80,7 +81,9 @@ export default async function RootLayout({
                             >
                                 <QueryClientProvider>
                                     <TooltipProvider>
-                                        {children}
+                                        <ProgressBarProvider>
+                                            {children}
+                                        </ProgressBarProvider>
                                     </TooltipProvider>
                                 </QueryClientProvider>
                             </ThemeProvider>

packages/web/src/app/progressBarProvider.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { ProgressProvider } from '@bprogress/next/app';
+
+export const ProgressBarProvider = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <ProgressProvider
+            color="var(--highlight)"
+            height="2px"
+            options={{
+                showSpinner: false
+            }}
+            delay={300}
+            shallowRouting
+        >
+            {children}
+        </ProgressProvider>
+    );
+};

yarn.lock

@@ -1328,6 +1328,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bprogress/core@npm:^1.3.4":
+  version: 1.3.4
+  resolution: "@bprogress/core@npm:1.3.4"
+  checksum: 10c0/fae88e83375c5d67b31a7186b6e6fad0f1ef59daee7408c9d6fe150ab3e1b368acfebd1b73ef913567c340803dac96841d81acc05268cdb99118431a26e3f258
+  languageName: node
+  linkType: hard
+
+"@bprogress/next@npm:^3.2.12":
+  version: 3.2.12
+  resolution: "@bprogress/next@npm:3.2.12"
+  dependencies:
+    "@bprogress/core": "npm:^1.3.4"
+    "@bprogress/react": "npm:^1.2.7"
+  peerDependencies:
+    next: ">=13.0.0"
+    react: ">=18.0.0"
+    react-dom: ">=18.0.0"
+  checksum: 10c0/8d993202a81125aae9543814d2248ee9e72e395ba570789362dbaaa9f09dd553f21b6a5c510843eb5fcb0eedfd21b0a7499ac0aa8a924a581910fb2531949aec
+  languageName: node
+  linkType: hard
+
+"@bprogress/react@npm:^1.2.7":
+  version: 1.2.7
+  resolution: "@bprogress/react@npm:1.2.7"
+  dependencies:
+    "@bprogress/core": "npm:^1.3.4"
+  peerDependencies:
+    react: ">=18.0.0"
+    react-dom: ">=18.0.0"
+  checksum: 10c0/f7683197118ab3a7355dfb8d12e4330ffa543ea4262bc8e04a54fb7a1caf0853e77e9a7648dcb2bba6082e0af1cf6adc5adfba80c63d45f953431e7c7a865419
+  languageName: node
+  linkType: hard
+
 "@cfworker/json-schema@npm:^4.0.2":
   version: 4.1.1
   resolution: "@cfworker/json-schema@npm:4.1.1"
@@ -9008,6 +9041,7 @@ __metadata:
     "@asteasolutions/zod-to-openapi": "npm:7.3.4"
     "@auth/prisma-adapter": "npm:^2.11.1"
     "@aws-sdk/credential-providers": "npm:^3.1036.0"
+    "@bprogress/next": "npm:^3.2.12"
     "@codemirror/commands": "npm:^6.6.0"
     "@codemirror/lang-cpp": "npm:^6.0.2"
     "@codemirror/lang-css": "npm:^6.3.0"