From 1d449e5b5238897cdbf64ff40d904543dca21a4c Mon Sep 17 00:00:00 2001
From: vaidankarswapnil <81285216+vaidankarswapnil@users.noreply.github.com>
Date: Thu, 17 Jun 2021 05:32:33 +0530
Subject: [PATCH] Implemented spinner in EditorReact component (#897)

---
 less/documentDB.less                         |  7 +++++
 src/Explorer/Controls/Editor/EditorReact.tsx | 28 +++++++++++++++-----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/less/documentDB.less b/less/documentDB.less
index 36744ddeb..1c8a7e8bb 100644
--- a/less/documentDB.less
+++ b/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%;
+}
diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx
index 71273ed20..662b78056 100644
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/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 {