Hide progress indicator once interactive window has loaded (#11143)

* Hide progress when UI loads
* News
* Address code review

Author: DonJayamanne

news/2 Fixes/11065.md

@@ -0,0 +1 @@
+Hide progress indicator once `Interactive Window` has loaded.

src/client/datascience/interactive-window/interactiveWindow.ts

@@ -274,6 +274,17 @@ export class InteractiveWindow extends InteractiveBase implements IInteractiveWi
         }
         return undefined;
     }
+    protected async addSysInfo(reason: SysInfoReason): Promise<void> {
+        await super.addSysInfo(reason);
+
+        // If `reason == Start`, then this means UI has been updated with the last
+        // pience of informaiotn (which was sys info), and now UI can be deemed as having been loaded.
+        // Marking a UI as having been loaded is done by sending a message `LoadAllCells`, even though we're not loading any cells.
+        // We're merely using existing messages (from NativeEditor).
+        if (reason === SysInfoReason.Start) {
+            this.postMessage(InteractiveWindowMessages.LoadAllCells, { cells: [] }).ignoreErrors();
+        }
+    }
     protected async onViewStateChanged(args: WebViewViewChangeEventArgs) {
         super.onViewStateChanged(args);
         this._onDidChangeViewState.fire();

src/datascience-ui/history-react/interactivePanel.tsx

@@ -51,7 +51,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps> {
             fontFamily: this.props.font.family
         };
 
-        const progressBar = this.props.busy && !this.props.testMode ? <Progress /> : undefined;
+        const progressBar = (this.props.busy || !this.props.loaded) && !this.props.testMode ? <Progress /> : undefined;
 
         // If in test mode, update our count. Use this to determine how many renders a normal update takes.
         if (this.props.testMode) {

src/datascience-ui/history-react/redux/reducers/creation.ts

@@ -183,4 +183,15 @@ export namespace Creation {
             editCellVM: undefined
         };
     }
+
+    export function loaded(arg: InteractiveReducerArg<{ cells: ICell[] }>): IMainState {
+        postActionToExtension(arg, InteractiveWindowMessages.LoadAllCellsComplete, {
+            cells: []
+        });
+        return {
+            ...arg.prevState,
+            loaded: true,
+            busy: false
+        };
+    }
 }

src/datascience-ui/history-react/redux/reducers/index.ts

@@ -34,6 +34,7 @@ export const reducerMap: Partial<IInteractiveActionMapping> = {
     [CommonActionType.SUBMIT_INPUT]: Execution.submitInput,
     [InteractiveWindowMessages.ExpandAll]: Effects.expandAll,
     [CommonActionType.EDITOR_LOADED]: Transfer.started,
+    [InteractiveWindowMessages.LoadAllCells]: Creation.loaded,
     [CommonActionType.SCROLL]: Effects.scrolled,
     [CommonActionType.CLICK_CELL]: Effects.clickCell,
     [CommonActionType.UNFOCUS_CELL]: Effects.unfocusCell,

src/datascience-ui/native-editor/nativeEditor.tsx

@@ -79,7 +79,7 @@ export class NativeEditor extends React.Component<INativeEditorProps> {
         }
 
         // Update the state controller with our new state
-        const progressBar = this.props.busy && !this.props.testMode ? <Progress /> : undefined;
+        const progressBar = (this.props.busy || !this.props.loaded) && !this.props.testMode ? <Progress /> : undefined;
         const addCellLine =
             this.props.cellVMs.length === 0 ? null : (
                 <AddCellLine