Add loading for monaco editors

Author: k.golikov

src/pages/DiffEditorPage.tsx

@@ -3,6 +3,9 @@ import PageContainer from '../components/pageContainer/PageContainer';
 import { DiffEditor } from '@monaco-editor/react';
 import useAppTheme from '../hooks/useAppTheme';
 import { editor } from 'monaco-editor';
+import { Spin } from 'antd';
+
+const loadingNode = <Spin size="large" />;
 
 const options: editor.IDiffEditorConstructionOptions = {
     originalEditable: true
@@ -13,7 +16,7 @@ const DiffEditorPage = () => {
 
     return (
         <PageContainer title="Diff Editor">
-            <DiffEditor theme={isDarkMode ? 'vs-dark' : 'light'} options={options} />
+            <DiffEditor theme={isDarkMode ? 'vs-dark' : 'light'} options={options} loading={loadingNode} />
         </PageContainer>
     );
 };

src/pages/codeFormatterPage/CodeFormatterPage.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent, useCallback, useRef, useState } from 'react';
 import PageContainer from '../../components/pageContainer/PageContainer';
 import useAppTheme from '../../hooks/useAppTheme';
 import Editor, { OnMount } from '@monaco-editor/react';
-import { Button, Col, Row, Select } from 'antd';
+import { Button, Col, Row, Select, Spin } from 'antd';
 import styles from './CodeFormatterPage.module.scss';
 import classNames from 'classnames';
 import MonacoLanguage, { monacoLanguages } from '../../types/MonacoLanguage';
@@ -45,6 +45,8 @@ import formatCode from '../../utils/formatCode';
 //
 // window.prettier = prettier;
 
+const loadingNode = <Spin size="large" />;
+
 const monacoOptions: editor.IStandaloneEditorConstructionOptions = {
     formatOnPaste: true
 };
@@ -114,6 +116,7 @@ const CodeFormatterPage: FunctionComponent = () => {
                     onChange={handleCodeChange}
                     options={monacoOptions}
                     onMount={handleMonacoMount}
+                    loading={loadingNode}
                 />
             </div>
         </PageContainer>