Merge pull request #610 from microsoftgraph/shweaver/mgt-spinner

Added mgt-spinner sub-component

Author: beth-panx

packages/mgt/src/components/mgt-people-picker/mgt-people-picker.scss

@@ -324,23 +324,6 @@ mgt-people-picker .message-parent {
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  .spinner {
-    border: 2px solid #c7e0f4; /* Light grey */
-    border-top: 2px solid #0078d4; /* Blue */
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    animation: spin 2s linear infinite;
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
 }
 
 :host .highlight-search-text,

packages/mgt/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -16,6 +16,7 @@ import { IDynamicPerson } from '../../graph/types';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
+import '../sub-components/mgt-spinner/mgt-spinner';
 import { debounce } from '../../utils/Utils';
 import { PersonViewType } from '../mgt-person/mgt-person';
 import { PersonCardInteraction } from '../PersonCardInteraction';
@@ -513,7 +514,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       this.renderTemplate('loading', null) ||
       html`
         <div class="message-parent">
-          <div class="spinner"></div>
+          <mgt-spinner></mgt-spinner>
           <div label="loading-text" aria-label="loading" class="loading-text">
             Loading...
           </div>

packages/mgt/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss

@@ -452,14 +452,6 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
       align-items: center;
       justify-content: center;
       vertical-align: middle;
-      .spinner {
-        border: 2px solid #c7e0f4; /* Light grey */
-        border-top: 2px solid #0078d4; /* Blue */
-        border-radius: 50%;
-        width: 20px;
-        height: 20px;
-        animation: spin 2s linear infinite;
-      }
       .loading-text {
         margin-top: 3px;
         margin-left: 9px;
@@ -468,12 +460,3 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
     }
   }
 }
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

packages/mgt/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts

@@ -11,6 +11,7 @@ import { classMap } from 'lit-html/directives/class-map';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
+import '../sub-components/mgt-spinner/mgt-spinner';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { debounce } from '../../utils/Utils';
 import { MgtTemplatedComponent } from '../templatedComponent';
@@ -553,7 +554,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
       template ||
       html`
         <div class="message-parent">
-          <div class="spinner"></div>
+          <mgt-spinner></mgt-spinner>
           <div label="loading-text" aria-label="loading" class="loading-text">
             Loading...
           </div>

packages/mgt/src/components/sub-components/mgt-spinner/mgt-spinner.scss

@@ -0,0 +1,28 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../../styles/shared-styles.scss';
+
+:host {
+  .spinner {
+    border: 2px solid #c7e0f4; /* Light grey */
+    border-top: 2px solid #0078d4; /* Blue */
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

packages/mgt/src/components/sub-components/mgt-spinner/mgt-spinner.ts

@@ -0,0 +1,40 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { customElement, html } from 'lit-element';
+import { MgtBaseComponent } from '../../baseComponent';
+import { styles } from './mgt-spinner-css';
+
+/**
+ * Custom Component used to handle loading state in components.
+ *
+ * @export MgtSpinner
+ * @class MgtSpinner
+ * @extends {MgtBaseComponent}
+ */
+@customElement('mgt-spinner')
+export class MgtSpinner extends MgtBaseComponent {
+  /**
+   * Array of styles to apply to the element. The styles should be defined
+   * user the `css` tag function.
+   */
+  public static get styles() {
+    return styles;
+  }
+
+  /**
+   * Render the loading spinner
+   *
+   * @returns
+   * @memberof MgtSpinner
+   */
+  public render() {
+    return html`
+      <div class="spinner"></div>
+    `;
+  }
+}