[frontend] Add label option to the Spinner component and fix various styling issues

Switching to <i> for icons as there are certain global styles for FA icons with the i tag

Author: JohanAhlen

desktop/core/src/desktop/js/components/Spinner.scss

@@ -0,0 +1,76 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+@import './styles/mixins';
+@import './styles/colors';
+
+.spinner-container {
+  @include fade-in;
+  position: relative;
+  z-index: 10000;
+
+
+  &.spinner {
+    @include fillAbsolute;
+    margin: auto 0;
+    vertical-align: center;
+  }
+
+  &.spinner-overlay {
+    @include fillAbsolute;
+    @include fade-in;
+    z-index: 10000;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &.spinner-inline {
+    @include fade-in;
+    display: inline-block;
+    position: relative;
+  }
+
+  &.spinner-blackout {
+    z-index: 999;
+    background-color: $fluid-white;
+  }
+
+  .spinner-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .spinner-large {
+    font-size: 26px !important;
+  }
+
+  .spinner-xlarge {
+    font-size: 60px !important;
+  }
+
+  span,
+  i {
+    font-size: 16px;
+    color: $fluid-gray-500;
+  }
+
+  span {
+    margin-left: 5px;
+  }
+}

desktop/core/src/desktop/js/components/Spinner.vue

@@ -21,27 +21,38 @@
     v-if="spin"
     class="spinner-container"
     :class="{
-      'hue-spinner-overlay': overlay,
-      'hue-spinner-inline': inline,
-      'hue-spinner': !overlay && !inline,
-      'hue-spinner-blackout': blackout
+      'spinner-overlay': overlay,
+      'spinner-inline': inline,
+      spinner: !overlay && !inline,
+      'spinner-blackout': blackout
     }"
   >
-    <em
-      class="fa fa-spinner fa-spin"
-      :style="{ width: center && inline ? '100%' : null }"
-      :class="{
-        'hue-spinner-large': size === 'large',
-        'hue-spinner-xlarge': size === 'xlarge',
-        'hue-spinner-center': center
-      }"
-    />
+    <div :style="{ width: center && inline ? '100%' : null }" :class="{ 'spinner-center': center }">
+      <i
+        class="fa fa-spinner fa-spin"
+        :class="{
+          'spinner-large': size === 'large',
+          'spinner-xlarge': size === 'xlarge'
+        }"
+      />
+      <span
+        v-if="label"
+        :class="{
+          'spinner-large': size === 'large',
+          'spinner-xlarge': size === 'xlarge'
+        }"
+      >
+        {{ label }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
 
+  import './Spinner.scss';
+
   export default defineComponent({
     name: 'Spinner',
     props: {
@@ -65,16 +76,14 @@
         type: Boolean,
         default: false
       },
+      label: {
+        type: String,
+        default: ''
+      },
       blackout: {
         type: Boolean,
         default: false
       }
     }
   });
 </script>
-
-<style lang="scss" scoped>
-  .spinner-container {
-    z-index: 10000;
-  }
-</style>

desktop/core/src/desktop/js/components/styles/mixins.scss

@@ -147,7 +147,7 @@ $hue-panel-border-radius: 3px;
 }
 
 @mixin fade-in {
-  @include animation('fade-in-frames 2s');
+  @include animation('fade-in-frames 0.5s');
 }
 
 @mixin fillAbsolute {