fix(files): ignore stale text loads (#1169)

* fix(files): ignore stale text loads

* fix(files): clear loading on directory read error

---------

Co-authored-by: Isaac Sanchez <isanchez-hawkins@arize.com>

packages/ui/src/components/views/FilesView.tsx

@@ -665,6 +665,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   const [isSaving, setIsSaving] = React.useState(false);
   const autoSaveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastLoadedFileStatRef = React.useRef<FileStatSnapshot | null>(null);
+  const activeFileLoadIdRef = React.useRef(0);
   const [autoSaveStatus, setAutoSaveStatus] = React.useState<'idle' | 'saved'>('idle');
   const [autoSaveEnabled, setAutoSaveEnabled] = React.useState(getInitialAutoSaveEnabled);
 
@@ -1452,6 +1453,15 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   }, [isSaving, saveDraft]);
 
   const loadSelectedFile = React.useCallback(async (node: FileNode) => {
+    const loadId = activeFileLoadIdRef.current + 1;
+    activeFileLoadIdRef.current = loadId;
+    const isCurrentLoad = () => {
+      if (!root) return false;
+      const rootState = useFilesViewTabsStore.getState().byRoot[root];
+      const currentPath = rootState?.selectedPath ?? rootState?.openPaths[0] ?? null;
+      return activeFileLoadIdRef.current === loadId && currentPath === node.path;
+    };
+
     setFileError(null);
     setDesktopImageSrc('');
     setLoadedFilePath(null);
@@ -1486,6 +1496,9 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
 
     await readFile(node.path, readOptions)
       .then((content) => {
+        if (!isCurrentLoad()) {
+          return;
+        }
         setFileContent(content);
         setDraftContent(content.length > MAX_VIEW_CHARS
           ? `${content.slice(0, MAX_VIEW_CHARS)}\n\n… truncated …`
@@ -1493,14 +1506,18 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
         setLoadedFilePath(node.path);
         void readFileStat(node.path, readOptions)
           .then((stat) => {
-            if (stat) {
+            if (stat && isCurrentLoad()) {
               lastLoadedFileStatRef.current = stat;
             }
           })
           .catch(() => {});
       })
       .catch((error) => {
+        if (!isCurrentLoad()) {
+          return;
+        }
         if (isDirectoryReadError(error)) {
+          setFileLoading(false);
           if (root) {
             setSelectedPath(root, null);
           }
@@ -1535,7 +1552,9 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
         lastLoadedFileStatRef.current = null;
       })
       .finally(() => {
-        setFileLoading(false);
+        if (isCurrentLoad()) {
+          setFileLoading(false);
+        }
       });
   }, [expandPaths, isMobile, loadDirectory, mode, readFile, readFileStat, root, runtime.isDesktop, searchQuery, setSelectedPath, t]);
 
@@ -1601,6 +1620,8 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
 
   React.useEffect(() => {
     if (!selectedFile) {
+      activeFileLoadIdRef.current += 1;
+      setFileLoading(false);
       return;
     }