Implemented spinner in EditorReact component (#897)

less/documentDB.less

@@ -3089,3 +3089,10 @@ settings-pane {
   display: none;
   height: 0px;
 }
+.spinner {
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  background: white;
+  height: 100%;
+}

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,6 +1,11 @@
+import { Spinner, SpinnerSize } from "@fluentui/react";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
+// import "./EditorReact.less";
 
+interface EditorReactStates {
+  showEditor: boolean;
+}
 export interface EditorReactProps {
   language: string;
   content: string;
@@ -12,30 +17,33 @@ export interface EditorReactProps {
   theme?: string; // Monaco editor theme
 }
 
-export class EditorReact extends React.Component<EditorReactProps> {
+export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
   private rootNode: HTMLElement;
   private editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
 
   public constructor(props: EditorReactProps) {
     super(props);
+    this.state = {
+      showEditor: false,
+    };
   }
 
   public componentDidMount(): void {
     this.createEditor(this.configureEditor.bind(this));
   }
 
-  public shouldComponentUpdate(): boolean {
-    // Prevents component re-rendering
-    return false;
-  }
-
   public componentWillUnmount(): void {
     this.selectionListener && this.selectionListener.dispose();
   }
 
   public render(): JSX.Element {
-    return <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />;
+    return (
+      <React.Fragment>
+        {!this.state.showEditor && <Spinner size={SpinnerSize.large} className="spinner" />}
+        <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />
+      </React.Fragment>
+    );
   }
 
   protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
@@ -76,6 +84,12 @@ export class EditorReact extends React.Component<EditorReactProps> {
     this.rootNode.innerHTML = "";
     const monaco = await loadMonaco();
     createCallback(monaco.editor.create(this.rootNode, options));
+
+    if (this.rootNode.innerHTML) {
+      this.setState({
+        showEditor: true,
+      });
+    }
   }
 
   private setRef(element: HTMLElement): void {