Change design of loading indicator (#13251)

* Change design of loading indicator * Adapt tests to new loading indicator class name
opf · Jul 26, 2023 · 06f7fca · 06f7fca
1 parent d9e56b5
commit 06f7fca
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 74 deletions.
diff --git a/frontend/src/app/core/loading-indicator/loading-indicator.service.ts b/frontend/src/app/core/loading-indicator/loading-indicator.service.ts
@@ -63,15 +63,14 @@ export function withDelayedLoadingIndicator<T>(indicator:() => LoadingIndicator)
 
 export class LoadingIndicator {
   private indicatorTemplate =
-  `<div class="loading-indicator--background">
-      <div class="loading-indicator">
-        <div class="block-1"></div>
-        <div class="block-2"></div>
-        <div class="block-3"></div>
-        <div class="block-4"></div>
-        <div class="block-5"></div>
+    `<div class="loading-indicator--background">
+        <svg class="op-loading-indicator">
+          <rect rx="4px"/>
+          <rect rx="4px"/>
+          <rect rx="4px"/>
+          <rect rx="2px"/>
+        </svg>
       </div>
-    </div>
    `;
 
   constructor(public indicator:JQuery) {

diff --git a/frontend/src/app/shared/components/toaster/toast.component.html b/frontend/src/app/shared/components/toaster/toast.component.html
@@ -1,16 +1,15 @@
 <div class="op-toast -{{ type }}" tabindex="0">
   <div class="op-toast--content" role="alert" aria-atomic="true">
     <ng-container *ngIf="type === 'loading'">
-      <div
+      <svg
         *ngIf="(loading$ | async)"
-        class="loading-indicator -small"
+        class="op-loading-indicator"
       >
-        <div class="block-1"></div>
-        <div class="block-2"></div>
-        <div class="block-3"></div>
-        <div class="block-4"></div>
-        <div class="block-5"></div>
-      </div>
+        <rect rx="4px"/>
+        <rect rx="4px"/>
+        <rect rx="4px"/>
+        <rect rx="2px"/>
+      </svg>
       <p [textContent]="toast.message"></p>
     </ng-container>
     <p *ngIf="type !== 'loading'">

diff --git a/frontend/src/global_styles/content/_loading_indicator.lsg b/frontend/src/global_styles/content/_loading_indicator.lsg
@@ -1,27 +1,25 @@
 # Loading indicator
 
-```
-<div class="loading-indicator">
-  <div class="block-1"></div>
-  <div class="block-2"></div>
-  <div class="block-3"></div>
-  <div class="block-4"></div>
-  <div class="block-5"></div>
-</div>
+```html
+<svg class="op-loading-indicator">
+  <rect rx="4px"/>
+  <rect rx="4px"/>
+  <rect rx="4px"/>
+  <rect rx="2px"/>
+</svg>
 ```
 
 
-To block the entire page, wrap the element in a div.loading-indicator--background
+To block the entire page, wrap the element in a `div.loading-indicator--background`
 
 
 ``` html
 <div class="loading-indicator--background">
-    <div class="loading-indicator">
-      <div class="block-1"></div>
-      <div class="block-2"></div>
-      <div class="block-3"></div>
-      <div class="block-4"></div>
-      <div class="block-5"></div>
-    </div>
+  <svg class="op-loading-indicator">
+    <rect rx="4px"/>
+    <rect rx="4px"/>
+    <rect rx="4px"/>
+    <rect rx="2px"/>
+  </svg>
 </div>
 ```
diff --git a/frontend/src/global_styles/content/_loading_indicator.sass b/frontend/src/global_styles/content/_loading_indicator.sass
@@ -20,9 +20,33 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+@keyframes svg_ani-1
+  0%
+    x: 150px
+    width: 0
+  36%
+    x: 0
+    width: 150px
+  72%
+    x: 0
+    width: 0
+  100%
+    x: 0
+    width: 0
+
+@keyframes svg_ani-2
+  0%
+    x: 150px
+  36%
+    x: 0
+  72%
+    x: -100px
+  100%
+    x: -100px
 
 $loading-indicator-bg-color: var(--body-background)
-$loading-indicator-spinner-color: var(--primary-color)
+$loading-indicator-width: 150px
+$loading-indicator-height: 70px
 
 .loading-indicator--background
   @include overlay-background
@@ -33,46 +57,50 @@ $loading-indicator-spinner-color: var(--primary-color)
 .loading-indicator--location
   position: relative
 
-.loading-indicator
-  margin: 80px auto
-  width: 100px
-  height: 50px
-  text-align: center
-  font-size: 10px
 
-  [class^='block-']
-    background-color: $loading-indicator-spinner-color
-    height: 100%
-    width: 6px
-    display: inline-block
-    animation: block-waveStretchDelay 1.2s infinite ease-in-out
-    margin: 0 1px
+.op-loading-indicator
+  margin: 0
+  position: relative
+  left: calc(50% - ($loading-indicator-width / 2))
+  top: 33%
+  width: $loading-indicator-width
+  height: $loading-indicator-height
+  view-box: 0 0 $loading-indicator-width $loading-indicator-height
 
-  .block-1
-    animation-delay: -1.2s
-  .block-2
-    animation-delay: -1.1s
-  .block-3
-    animation-delay: -1s
-  .block-4
-    animation-delay: -0.9s
-  .block-5
-    animation-delay: -0.8s
+  rect
+    rx: 4px
+    x: 152px
+    height: 10px
+    width: 150px
+    animation-duration: 2000ms
+    animation-iteration-count: infinite
+    animation-timing-function: linear
+    animation-name: svg_ani-1
 
-  &.-compact
-    margin: 20px auto
+    &:nth-of-type(1)
+      fill: #f89a43
+      x: 140px
+      y: 6px
 
-  &.-small
-    width: 40px
-    height: 24px
-    margin: 0
-    text-align: left
+    &:nth-of-type(2)
+      fill: #f89a43
+      y: 26px
+      animation-delay: 660ms
 
-    [class^='block-']
-      width: 4px
+    &:nth-of-type(3)
+      fill: #346495
+      y: 46px
+      animation-name: svg_ani-1
+      animation-delay: 1330ms
 
-@keyframes block-waveStretchDelay
-  0%, 40%, 100%
-    transform: scaleY(0.4)
-  20%
-    transform: scaleY(1)
+    &:nth-of-type(4)
+      fill: #36c434
+      y: 44px
+      rx: 2px
+      width: 14px
+      height: 14px
+      transform-box: fill-box
+      transform-origin: center
+      transform: rotate(45deg)
+      animation-name: svg_ani-2
+      animation-delay: 2130ms
diff --git a/modules/boards/spec/features/support/board_page.rb b/modules/boards/spec/features/support/board_page.rb
@@ -177,8 +177,8 @@ def wait_for_lists_reload
       # wait for reload of lists to start and finish
       # Not sure if that's the most reliable way to do it, but there is nothing visible
       # about the PATCH request being sent and executed successfully after moving a card.
-      expect(page).to have_selector('.loading-indicator', wait: 5)
-      expect(page).not_to have_selector('.loading-indicator')
+      expect(page).to have_selector('.op-loading-indicator', wait: 5)
+      expect(page).not_to have_selector('.op-loading-indicator')
     end
 
     def add_list(option: nil, query: option)

diff --git a/spec/support/onboarding_helper.rb b/spec/support/onboarding_helper.rb
@@ -30,7 +30,7 @@
 
 module OnboardingHelper
   def step_through_onboarding_wp_tour(project, wp)
-    expect(page).not_to have_selector('.loading-indicator')
+    expect(page).not_to have_selector('.op-loading-indicator')
     expect(page).to have_text sanitize_string(I18n.t('js.onboarding.steps.wp.list')), normalize_ws: true
 
     next_button.click

diff --git a/spec/support/shared/loading_indicator_saveguard.rb b/spec/support/shared/loading_indicator_saveguard.rb
@@ -34,5 +34,5 @@
 #
 
 def loading_indicator_saveguard
-  expect(page).not_to have_selector('.loading-indicator')
+  expect(page).not_to have_selector('.op-loading-indicator')
 end