loading screen

ui/shared/monaco/CodeEditor.tsx

@@ -9,6 +9,7 @@ import type { File, Monaco } from './types';
 import useClientRect from 'lib/hooks/useClientRect';
 
 import CodeEditorBreadcrumbs from './CodeEditorBreadcrumbs';
+import CodeEditorLoading from './CodeEditorLoading';
 import CodeEditorSideBar from './CodeEditorSideBar';
 import CodeEditorTabs from './CodeEditorTabs';
 import * as themes from './utils/themes';
@@ -143,6 +144,7 @@ const CodeEditor = ({ data }: Props) => {
           defaultValue={ data[index].source_code }
           options={ EDITOR_OPTIONS }
           onMount={ handleEditorDidMount }
+          loading={ <CodeEditorLoading/> }
         />
       </Box>
       <CodeEditorSideBar data={ data } onFileSelect={ handleSelectFile } monaco={ instance } selectedFile={ data[index].file_path }/>

ui/shared/monaco/CodeEditorLoading.tsx

+import { Center } from '@chakra-ui/react';
+import React from 'react';
+
+import ContentLoader from 'ui/shared/ContentLoader';
+
+import useThemeColors from './utils/useThemeColors';
+
+const CodeEditorLoading = () => {
+  const themeColors = useThemeColors();
+
+  return (
+    <Center bgColor={ themeColors['editor.background'] } w="100%" h="100%">
+      <ContentLoader/>
+    </Center>
+  );
+};
+
+export default React.memo(CodeEditorLoading);