fix: Improve symbol reference/definition list perf (#327)

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Fixed issue with the symbol hover popover clipping at the top of the page. [#326](https://github.com/sourcebot-dev/sourcebot/pull/326)
+- Fixed slow rendering issue with large reference/definition lists. [#327](https://github.com/sourcebot-dev/sourcebot/pull/327)
 
 ## [4.1.0] - 2025-06-02
 

packages/web/src/app/[domain]/components/lightweightCodeHighlighter.tsx

@@ -27,6 +27,9 @@ interface LightweightCodeHighlighter {
     renderWhitespace?: boolean;
 }
 
+// The maximum number of characters per line that we will display in the preview.
+const MAX_NUMBER_OF_CHARACTER_PER_LINE = 1000;
+
 /**
  * Lightweight code highlighter that uses the Lezer parser to highlight code.
  * This is helpful in scenarios where we need to highlight a ton of code snippets
@@ -49,12 +52,19 @@ export const LightweightCodeHighlighter = memo<LightweightCodeHighlighter>((prop
         return code.trimEnd().split('\n');
     }, [code]);
 
+    const isFileTooLargeToDisplay = useMemo(() => {
+        return unhighlightedLines.some(line => line.length > MAX_NUMBER_OF_CHARACTER_PER_LINE);
+    }, [code]);
 
     const [highlightedLines, setHighlightedLines] = useState<React.ReactNode[] | null>(null);
 
     const highlightStyle = useCodeMirrorHighlighter();
 
     useEffect(() => {
+        if (isFileTooLargeToDisplay) {
+            return;
+        }
+
         measure(() => Promise.all(
             unhighlightedLines
                 .map(async (line, index) => {
@@ -103,12 +113,21 @@ export const LightweightCodeHighlighter = memo<LightweightCodeHighlighter>((prop
     const lineNumberDigits = String(lineCount).length;
     const lineNumberWidth = `${lineNumberDigits + 2}ch`; // +2 for padding
 
+    if (isFileTooLargeToDisplay) {
+        return (
+            <div className="font-mono text-sm px-2">
+                File too large to display in preview.
+            </div>
+        );
+    }
+
     return (
         <div
             style={{
                 fontFamily: tailwind.theme.fontFamily.editor,
                 fontSize: tailwind.theme.fontSize.editor,
                 whiteSpace: renderWhitespace ? 'pre-wrap' : 'none',
+                wordBreak: 'break-all',
             }}
         >
             {(highlightedLines ?? unhighlightedLines).map((line, index) => (

packages/web/src/ee/features/codeNav/components/exploreMenu/referenceList.tsx

@@ -3,18 +3,21 @@
 import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
 import { FileHeader } from "@/app/[domain]/components/fileHeader";
 import { LightweightCodeHighlighter } from "@/app/[domain]/components/lightweightCodeHighlighter";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { FindRelatedSymbolsResponse } from "@/features/codeNav/types";
 import { RepositoryInfo, SourceRange } from "@/features/search/types";
 import { base64Decode } from "@/lib/utils";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import useCaptureEvent from "@/hooks/useCaptureEvent";
+import { useVirtualizer } from "@tanstack/react-virtual";
 
 interface ReferenceListProps {
     data: FindRelatedSymbolsResponse;
     revisionName: string;
 }
 
+const ESTIMATED_LINE_HEIGHT_PX = 30;
+const ESTIMATED_MATCH_CONTAINER_HEIGHT_PX = 30;
+
 export const ReferenceList = ({
     data,
     revisionName,
@@ -29,14 +32,63 @@ export const ReferenceList = ({
     const { navigateToPath } = useBrowseNavigation();
     const captureEvent = useCaptureEvent();
 
-    return (
+    // Virtualization setup
-        <ScrollArea className="h-full">
+    const parentRef = useRef<HTMLDivElement>(null);
-            {data.files.map((file, index) => {
+    const virtualizer = useVirtualizer({
-                const repoInfo = repoInfoMap[file.repositoryId];
+        count: data.files.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: (index) => {
+            const file = data.files[index];
+            
+            const estimatedSize =
+                file.matches.length * ESTIMATED_LINE_HEIGHT_PX +
+                ESTIMATED_MATCH_CONTAINER_HEIGHT_PX;
+
+            return estimatedSize;
+        },
+        overscan: 5,
+        enabled: true,
+    });
 
     return (
-                    <div key={index}>
+        <div
-                        <div className="bg-accent py-1 px-2 flex flex-row sticky top-0">
+            ref={parentRef}
+            style={{
+                width: "100%",
+                height: "100%",
+                overflowY: "auto",
+                contain: "strict",
+            }}
+        >
+            <div
+                style={{
+                    height: virtualizer.getTotalSize(),
+                    width: "100%",
+                    position: "relative",
+                }}
+            >
+                {virtualizer.getVirtualItems().map((virtualRow) => {
+                    const file = data.files[virtualRow.index];
+                    const repoInfo = repoInfoMap[file.repositoryId];
+                    return (
+                        <div
+                            key={virtualRow.key}
+                            data-index={virtualRow.index}
+                            ref={virtualizer.measureElement}
+                            style={{
+                                position: "absolute",
+                                transform: `translateY(${virtualRow.start}px)`,
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                            }}
+                        >
+                            <div
+                                className="bg-accent py-1 px-2 flex flex-row sticky top-0 z-10"
+                                style={{
+                                    top: `-${virtualRow.start}px`,
+                                }}
+                            >
                                 <FileHeader
                                     repo={{
                                         name: repoInfo.name,
@@ -71,10 +123,11 @@ export const ReferenceList = ({
                                     ))}
                             </div>
                         </div>
-                )
+                    );
                 })}
-        </ScrollArea>
+            </div>
-    )
+        </div>
+    );
 }