Fix panel flicker and preserve editor view during file switches

Author: vipmax

anycode/components/layout/Layout.tsx

@@ -880,21 +880,26 @@ export const Layout: React.FC<LayoutProps> = ({
         };
     }, []);
 
+    const applyPanelViewStates = useCallback(() => {
+        Object.entries(panelViewStatesRef.current).forEach(([panelKey, state]) => {
+            panelViewStateHandlersRef.current.get(panelKey)?.restoreViewState(state);
+        });
+    }, []);
+
     const restorePanelViewStates = useCallback(() => {
         if (restoreViewStatesFrameRef.current !== null) {
             cancelAnimationFrame(restoreViewStatesFrameRef.current);
         }
 
-        restoreViewStatesFrameRef.current = requestAnimationFrame(() => {
-            restoreViewStatesFrameRef.current = requestAnimationFrame(() => {
-                restoreViewStatesFrameRef.current = null;
+        // Apply immediately to avoid a visible one-frame jump to scrollTop=0.
+        applyPanelViewStates();
 
-                Object.entries(panelViewStatesRef.current).forEach(([panelKey, state]) => {
-                    panelViewStateHandlersRef.current.get(panelKey)?.restoreViewState(state);
-                });
-            });
+        // Run one follow-up pass in the next frame for content that mounts asynchronously.
+        restoreViewStatesFrameRef.current = requestAnimationFrame(() => {
+            restoreViewStatesFrameRef.current = null;
+            applyPanelViewStates();
         });
-    }, []);
+    }, [applyPanelViewStates]);
 
     const queueSaveLayout = useCallback((api: DockviewApi) => {
         if (layoutSaveTimerRef.current !== null) {
@@ -1144,7 +1149,7 @@ export const Layout: React.FC<LayoutProps> = ({
         apiRef.current = null;
     }, [disposeListeners]);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const api = apiRef.current;
         if (!api) {
             return;

anycode/features/editor/EditorPanel.tsx

@@ -1,12 +1,13 @@
-import { AnycodeEditorReact } from 'anycode-react';
+import { useEffect, useState } from 'react';
+import { AnycodeEditor, AnycodeEditorReact } from 'anycode-react';
 import type { ReferencesPeekState } from '../../types';
 import { ReferencesPeek } from './ReferencesPeek';
 
 type EditorPanelProps = {
     panelKey: string;
     editors: {
         files: Array<{ id: string }>;
-        editorStates: ReadonlyMap<string, unknown>;
+        editorStates: ReadonlyMap<string, AnycodeEditor>;
         getActiveFileIdForPane: (paneId: string) => string | null;
         setActiveEditorPaneId: (paneId: string) => void;
         getReferencesPeekForPane: (paneId: string) => ReferencesPeekState | null;
@@ -22,17 +23,28 @@ export const EditorPanel = ({ panelKey, editors }: EditorPanelProps) => {
     const paneFile = paneFileId ? editors.files.find((file) => file.id === paneFileId) : null;
     const editorState = paneFile ? editors.editorStates.get(paneFile.id) : null;
     const referencesPeek = editors.getReferencesPeekForPane(panelKey);
+    const [lastReadyEditor, setLastReadyEditor] = useState<{ id: string; state: AnycodeEditor } | null>(null);
+
+    useEffect(() => {
+        if (paneFile && editorState) {
+            setLastReadyEditor({ id: paneFile.id, state: editorState });
+        }
+    }, [paneFile, editorState]);
+
+    const displayedEditor = paneFile && editorState
+        ? { id: paneFile.id, state: editorState }
+        : lastReadyEditor;
 
     return (
         <div
             className="editor-container"
             onMouseDown={() => editors.setActiveEditorPaneId(panelKey)}
         >
-            {paneFile && editorState ? (
+            {displayedEditor ? (
                 <AnycodeEditorReact
-                    key={`${panelKey}:${paneFile.id}`}
-                    id={paneFile.id}
-                    editorState={editorState as never}
+                    key={`${panelKey}:${displayedEditor.id}`}
+                    id={displayedEditor.id}
+                    editorState={displayedEditor.state}
                 />
             ) : (
                 <div className="no-editor"></div>