Add loading to editor

src/components/Playground/CodeEditor/Editor/editor.scss

@@ -1,43 +1,98 @@
-.monaco-editor-light {
-  height: 100%;
-  overflow: hidden;
-  background-color: var(--border);
-
-  .jsx-tag-angle-bracket {
-    color: #800000;
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content
   }
-
-  .jsx-text {
-    color: #000;
+  @-moz-keyframes #{$animationName} {
+    @content
   }
-
-  .jsx-tag-name {
-    color: #800000;
+  @-o-keyframes #{$animationName} {
+    @content
   }
-
-  .jsx-tag-attribute-key {
-    color: #f00;
+  @keyframes #{$animationName} {
+    @content
   }
 }
 
-.monaco-editor-vs-dark {
-  height: 100%;
-  overflow: hidden;
-  background-color: var(--border);
+@mixin unique-keyframes {
+  $animationName: unique-id();
+  animation-name: $animationName;
+  @include keyframes($animationName) {
+    @content
+  }
+}
 
-  .jsx-tag-angle-bracket {
-    color: #808080;
+[data-component=playground-code-editor-editor] {
+  position: relative;
+  height: 0;
+
+  .monaco-editor-light {
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--border);
+
+    .jsx-tag-angle-bracket {
+      color: #800000;
+    }
+
+    .jsx-text {
+      color: #000;
+    }
+
+    .jsx-tag-name {
+      color: #800000;
+    }
+
+    .jsx-tag-attribute-key {
+      color: #f00;
+    }
   }
 
-  .jsx-text {
-    color: #d4d4d4;
+  .monaco-editor-vs-dark {
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--border);
+
+    .jsx-tag-angle-bracket {
+      color: #808080;
+    }
+
+    .jsx-text {
+      color: #d4d4d4;
+    }
+
+    .jsx-tag-name {
+      color: #569cd6;
+    }
+
+    .jsx-tag-attribute-key {
+      color: #9cdcfe;
+    }
   }
 
-  .jsx-tag-name {
-    color: #569cd6;
-  }
+  .playground-code-editor-loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 4px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: {
+      top: 2px #666 solid;
+      bottom: 2px #ddd solid;
+      left: 2px #ddd solid;
+      right: 2px #ddd solid;
+    };
+    animation: .6s linear infinite;
 
-  .jsx-tag-attribute-key {
-    color: #9cdcfe;
+    @include unique-keyframes {
+      0% {
+        transform: rotateZ(0);
+      }
+
+      100% {
+        transform: rotateZ(360deg);
+      }
+    }
   }
 }

src/components/Playground/CodeEditor/Editor/index.tsx

@@ -36,7 +36,7 @@ const Editor: React.FC<EditorProps> = ({
         highlighter: () => undefined,
         dispose: () => undefined
     })
-    const { onWatch } = useTypesProgress()
+    const { total, finished, onWatch } = useTypesProgress()
     const file = files[selectedFileName] ?? { name: 'Untitled' }
 
     const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
@@ -87,21 +87,24 @@ const Editor: React.FC<EditorProps> = ({
 
     return (
         <>
-            <MonacoEditor
-                theme={theme}
-                path={file.name}
-                className={`monaco-editor-${theme ?? 'light'}`}
-                language={file.language}
-                value={file.value}
-                onChange={onChange}
-                onMount={handleOnEditorDidMount}
-                options={{
-                    ...MonacoEditorConfig,
-                    ...options,
-                    theme: undefined,
-                    readOnly: readonly
-                }}
-            />
+            <div data-component={'playground-code-editor-editor'}>
+                <MonacoEditor
+                    theme={theme}
+                    path={file.name}
+                    className={`monaco-editor-${theme ?? 'light'}`}
+                    language={file.language}
+                    value={file.value}
+                    onChange={onChange}
+                    onMount={handleOnEditorDidMount}
+                    options={{
+                        ...MonacoEditorConfig,
+                        ...options,
+                        theme: undefined,
+                        readOnly: readonly
+                    }}
+                />
+                {total > 0 && !finished && <div className={'playground-code-editor-loading'} />}
+            </div>
         </>
     )
 }