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);
+      }
+    }
   }
 }