Hide progress indicator once interactive window has loaded (microsoft#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