Add loading to editor

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

@@ -1,4 +1,31 @@
-.monaco-editor-light {
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content
+  }
+  @-moz-keyframes #{$animationName} {
+    @content
+  }
+  @-o-keyframes #{$animationName} {
+    @content
+  }
+  @keyframes #{$animationName} {
+    @content
+  }
+}
+
+@mixin unique-keyframes {
+  $animationName: unique-id();
+  animation-name: $animationName;
+  @include keyframes($animationName) {
+    @content
+  }
+}
+
+[data-component=playground-code-editor-editor] {
+  position: relative;
+  height: 0;
+
+  .monaco-editor-light {
     height: 100%;
     overflow: hidden;
     background-color: var(--border);
@@ -18,9 +45,9 @@
     .jsx-tag-attribute-key {
       color: #f00;
     }
-}
+  }
 
-.monaco-editor-vs-dark {
+  .monaco-editor-vs-dark {
     height: 100%;
     overflow: hidden;
     background-color: var(--border);
@@ -40,4 +67,32 @@
     .jsx-tag-attribute-key {
       color: #9cdcfe;
     }
+  }
+
+  .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;
+
+    @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,6 +87,7 @@ const Editor: React.FC<EditorProps> = ({
 
     return (
         <>
+            <div data-component={'playground-code-editor-editor'}>
                 <MonacoEditor
                     theme={theme}
                     path={file.name}
@@ -102,6 +103,8 @@ const Editor: React.FC<EditorProps> = ({
                         readOnly: readonly
                     }}
                 />
+                {total > 0 && !finished && <div className={'playground-code-editor-loading'} />}
+            </div>
         </>
     )
 }

src/components/Playground/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { IPlayground } from '@/components/Playground/shared'
 
-const ReactPlayground: React.FC<IPlayground> = () => {
+const ReactPlayground: React.FC = () => {
     return <></>
 }