feat(SFINT-4203) Add loading spinner during user actions call (#101)

* SFINT-4203 fix deprecated sass lines added loading spinner on user actions added loading unit test
coveo · Feb 3, 2022 · 35e19ab · 35e19ab
1 parent 075b42e
commit 35e19ab
Show file tree

Hide file tree

Showing 6 changed files with 698 additions and 3 deletions.
diff --git a/src/components/UserActions/UserActions.scss b/src/components/UserActions/UserActions.scss
@@ -4,7 +4,7 @@
 $row-height: 6em;
 $path-line-width: 0.05em;
 $headers-gap: 2em;
-$dot-width: $headers-gap / 3;
+$dot-width: calc($headers-gap / 3);
 $font-size: 1em;
 $font-size-titles: 1.2em;
 $font-size-small: 0.8em;
@@ -77,6 +77,12 @@ $clickable-blue: #004990;
             display: none;
         }
     }
+
+    .coveo-loading-container {
+        position: relative;
+        height: 10rem;
+        top: 10rem;
+    }
 }
 
 .coveo-expandable-list {

diff --git a/src/components/UserActions/UserActions.ts b/src/components/UserActions/UserActions.ts
@@ -171,6 +171,7 @@ export class UserActions extends Component {
     public async show() {
         if (!this.isOpened) {
             this.isOpened = true;
+            this.renderLoading();
             this.element.dispatchEvent(new CustomEvent(UserActions.Events.Show));
             this.bindings.usageAnalytics.logCustomEvent(UserActionEvents.open, {}, this.element);
             this.root.classList.add(UserActions.USER_ACTION_OPENED);
@@ -280,6 +281,19 @@ export class UserActions extends Component {
         });
     }
 
+    private renderLoading() {
+        this.element.innerHTML = '';
+        const loadingElement = document.createElement('div');
+        loadingElement.classList.add('coveo-loading-container');
+        loadingElement.innerHTML = `
+        <div role="status" class="slds-spinner slds-spinner--medium">
+            <span class="slds-assistive-text">Loading</span>
+            <div class="slds-spinner__dot-a"></div>
+            <div class="slds-spinner__dot-b"></div>
+        </div>`;
+        this.element.appendChild(loadingElement);
+    }
+
     private render() {
         const element = document.createElement('div');
 

diff --git a/src/sass/Index.scss b/src/sass/Index.scss
@@ -6,3 +6,4 @@
 @import '../components/ViewedByCustomer/ViewedByCustomer.scss';
 @import './ResultActionMenu.scss';
 @import '../components/TopQueries/TopQueries.scss';
+@import './SLDSSpinner.scss';
diff --git a/src/sass/ResultActionMenu.scss b/src/sass/ResultActionMenu.scss
@@ -21,7 +21,7 @@ $tooltip-z-index: 1000;
     svg {
         height: $menu-height;
         width: $menu-height;
-        padding: $menu-height * (1 / 6);
+        padding: $menu-height * calc(1 / 6);
         border: thin solid transparent;
         box-sizing: border-box;
     }
@@ -67,7 +67,7 @@ $tooltip-z-index: 1000;
                 fill: $calypso;
                 height: $menu-height;
                 width: $menu-height;
-                padding: $menu-height * (1 / 6) 0;
+                padding: $menu-height * calc(1 / 6) 0;
                 box-sizing: border-box;
             }
         }