Update file list loading progress ring from fluent ui wc (#1221)

* Update file list loading progress ring from fluent ui wc

* Update package structure

* Update packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

Co-authored-by: Nikola Metulev <[email protected]>

Co-authored-by: Nikola Metulev <[email protected]>

Author: beth-panx

packages/mgt-components/package.json

@@ -40,6 +40,7 @@
     "@microsoft/microsoft-graph-client": "^2.2.1",
     "@microsoft/microsoft-graph-types": "^2.0.0",
     "@microsoft/microsoft-graph-types-beta": "^0.12.0-preview",
+    "@fluentui/web-components": "^0.22.1",
     "office-ui-fabric-core": "11.0.0"
   },
   "publishConfig": {

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss

@@ -33,6 +33,8 @@ $show-more-button-background-color--hover: var(
   --show-more-button-background-color--hover,
   $file-item-background-color--hover
 );
+$progress-ring-size: var(--progress-ring-size, 24px);
+
 :host {
   font-family: $font-family;
   font-size: $font-size;
@@ -89,6 +91,12 @@ mgt-file-item .file-list-wrapper {
     }
   }
 
+  .progress-ring {
+    margin: 4px auto;
+    width: $progress-ring-size;
+    height: $progress-ring-size;
+  }
+
   .show-more {
     text-align: center;
     font-size: $show-more-button-font-size;

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -13,7 +13,7 @@ import {
   ProviderState
 } from '@microsoft/mgt-element';
 import { DriveItem } from '@microsoft/microsoft-graph-types';
-import { customElement, html, property, TemplateResult } from 'lit-element';
+import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
 import { repeat } from 'lit-html/directives/repeat';
 import {
   clearFilesCache,
@@ -40,6 +40,8 @@ import { styles } from './mgt-file-list-css';
 import { strings } from './strings';
 import { MgtFile } from '../mgt-file/mgt-file';
 
+export { FluentDesignSystemProvider, FluentProgressRing } from '@fluentui/web-components';
+
 /**
  * The File List component displays a list of multiple folders and files by
  * using the file/folder name, an icon, and other properties specicified by the developer.
@@ -69,6 +71,7 @@ import { MgtFile } from '../mgt-file/mgt-file';
  * @cssprop --show-more-button-padding - {String} Show more button padding
  * @cssprop --show-more-button-border-bottom-right-radius - {String} Show more button bottom right radius
  * @cssprop --show-more-button-border-bottom-left-radius - {String} Show more button bottom left radius
+ * @cssprop --progress-ring-size -{String} Progress ring height and width
  */
 
 @customElement('mgt-file-list')
@@ -400,6 +403,8 @@ export class MgtFileList extends MgtTemplatedComponent {
   // tracking user arrow key input of selection for accessibility purpose
   private _focusedItemIndex: number = -1;
 
+  @internalProperty() private _isLoadingMore: boolean;
+
   constructor() {
     super();
 
@@ -525,9 +530,11 @@ export class MgtFileList extends MgtTemplatedComponent {
    * @memberof MgtFileList
    */
   protected renderMoreFileButton(): TemplateResult {
-    if (this.isLoadingState) {
+    if (this._isLoadingMore) {
       return html`
-        <mgt-spinner></mgt-spinner>
+        <fluent-design-system-provider use-defaults>
+          <fluent-progress-ring role="progressbar" viewBox="0 0 8 8" class="progress-ring"></fluent-progress-ring>
+        </fluent-design-system-provider>
       `;
     } else {
       return html`<a id="show-more" class="show-more" @click=${() => this.renderNextPage()} tabindex="0" @keydown=${
@@ -768,28 +775,6 @@ export class MgtFileList extends MgtTemplatedComponent {
    * @memberof MgtFileList
    */
   protected async renderNextPage() {
-    const root = this.renderRoot.querySelector('file-list-wrapper');
-    if (root && root.animate) {
-      // play back
-      root.animate(
-        [
-          {
-            height: 'auto',
-            transformOrigin: 'top left'
-          },
-          {
-            height: 'auto',
-            transformOrigin: 'top left'
-          }
-        ],
-        {
-          duration: 1000,
-          easing: 'ease-in-out',
-          fill: 'both'
-        }
-      );
-    }
-
     // render next page from cache if exists, or else use iterator
     if (this._preloadedFiles.length > 0) {
       this.files = [
@@ -798,7 +783,30 @@ export class MgtFileList extends MgtTemplatedComponent {
       ];
     } else {
       if (this.pageIterator.hasNext) {
+        this._isLoadingMore = true;
+        const root = this.renderRoot.querySelector('file-list-wrapper');
+        if (root && root.animate) {
+          // play back
+          root.animate(
+            [
+              {
+                height: 'auto',
+                transformOrigin: 'top left'
+              },
+              {
+                height: 'auto',
+                transformOrigin: 'top left'
+              }
+            ],
+            {
+              duration: 1000,
+              easing: 'ease-in-out',
+              fill: 'both'
+            }
+          );
+        }
         await fetchNextAndCacheForFilesPageIterator(this.pageIterator);
+        this._isLoadingMore = false;
         this.files = this.pageIterator.value;
       }
     }