Add dot loader for recommender view

Signed-off-by: Jay Wang <[email protected]>

Author: xiaohk

src/components/recommender-view/recommender-view.css

@@ -361,9 +361,13 @@
   }
 
   .progress-message {
+    position: relative;
+
     &::after {
+      display: inline;
+      position: absolute;
+      animation: dot-animation steps(1, end) 2000ms infinite;
       content: '';
-      animation: dot 300ms linear infinite;
     }
   }
 
@@ -374,6 +378,24 @@
   }
 }
 
+@keyframes dot-animation {
+  0% {
+    content: '';
+  }
+  25% {
+    content: '.';
+  }
+  50% {
+    content: '..';
+  }
+  75% {
+    content: '...';
+  }
+  100% {
+    content: '';
+  }
+}
+
 button {
   all: unset;
 }

src/components/recommender-view/recommender-view.ts

@@ -1053,7 +1053,7 @@ export class RecRecRecommenderView extends LitElement {
         <sl-progress-ring
           value=${(this.completedStep / this.totalStep) * 100}
         ></sl-progress-ring>
-        <span class="progress-message">Fetching recommender details...</span>
+        <span class="progress-message">Fetching recommender details</span>
         <span class="progress-remain-time"
           >About ${formatRemainTime(this.remainTimeMS)} left</span
         >