Merge branch '27306-editor-lite-loading' into 'master'

Introduced a mixin for spinner for re-usability

See merge request gitlab-org/gitlab!46251

app/assets/stylesheets/framework/editor-lite.scss

+[data-editor-loading] {
+  @include gl-relative;
+  @include gl-display-flex;
+  @include gl-justify-content-center;
+  @include gl-align-items-center;
+
+  &::before {
+    content: '';
+    @include spinner(32px, 3px);
+    @include gl-absolute;
+    @include gl-z-index-1;
+  }
+
+  pre {
+    opacity: 0;
+  }
+}
+
 [id^='editor-lite-'] {
   height: 500px;
 }

app/assets/stylesheets/framework/spinner.scss

@@ -20,7 +20,7 @@
   }
 }
 
-.spinner {
+@mixin spinner($size: 16px, $border-width: 2px, $color: $orange-400) {
   border-radius: 50%;
   position: relative;
   margin: 0 auto;
@@ -30,8 +30,12 @@
   animation-iteration-count: infinite;
   border-style: solid;
   display: inline-flex;
-  @include spinner-size(16px, 2px);
-  @include spinner-color($orange-400);
+  @include spinner-size($size, $border-width);
+  @include spinner-color($color);
+}
+
+.spinner {
+  @include spinner;
 
   &.spinner-md {
     @include spinner-size(32px, 3px);