Fix oppia#15986: Animate loading dots while response is loading (oppia#24489)

* Fix animation of loading dots while response is loading

* Fix CSS lint errors for loading dots animation

* Fix CSS formatting for loading dots

* Fix CSS property order for animation delay

* Fix animation-delay property order for loading dots

* Fix: added removed class

* fix

* Fix: align div attributes to satisfy HTML lint

Author: tanay235

core/templates/pages/exploration-player-page/current-lesson-player/learner-experience/input-response-pair.component.css

@@ -68,16 +68,19 @@ oppia-input-response-pair .oppia-popover {
   max-width: 300px;
 }
 
-oppia-input-response-pair .conversation-skin-feedback-dot-one,
-oppia-input-response-pair .conversation-skin-feedback-dot-two,
-oppia-input-response-pair .conversation-skin-feedback-dot-three {
+oppia-input-response-pair .oppia-loading-dot-one,
+oppia-input-response-pair .oppia-loading-dot-two,
+oppia-input-response-pair .oppia-loading-dot-three {
   background-color: #666;
+  border-radius: 50%;
   display: inline-block;
-  height: 2px;
-  width: 2px;
+  font-size: 0;
+  height: 5px;
+  margin-right: 4px;
+  width: 5px;
 }
 
-oppia-input-response-pair .conversation-skin-feedback-dot-one {
+oppia-input-response-pair .oppia-loading-dot-one {
   -webkit-animation: dot 1.0s infinite;
   -moz-animation: dot 1.0s infinite;
   animation: dot 1.0s infinite;
@@ -87,7 +90,7 @@ oppia-input-response-pair .conversation-skin-feedback-dot-one {
   opacity: 0;
 }
 
-oppia-input-response-pair .conversation-skin-feedback-dot-two {
+oppia-input-response-pair .oppia-loading-dot-two {
   -webkit-animation: dot 1.0s infinite;
   -moz-animation: dot 1.0s infinite;
   animation: dot 1.0s infinite;
@@ -97,13 +100,14 @@ oppia-input-response-pair .conversation-skin-feedback-dot-two {
   opacity: 0;
 }
 
-oppia-input-response-pair .conversation-skin-feedback-dot-three {
-  -webkit-animation: dot 1.0s infinite;
+oppia-input-response-pair .oppia-loading-dot-three {
   -moz-animation: dot 1.0s infinite;
+  -webkit-animation: dot 1.0s infinite;
   animation: dot 1.0s infinite;
-  -webkit-animation-delay: 0.4s;
   -moz-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;
+  margin-right: 0;
   opacity: 0;
 }
 

core/templates/pages/exploration-player-page/current-lesson-player/learner-experience/input-response-pair.component.html

@@ -36,15 +36,17 @@
   </div>
 </div>
 
-<div class="conversation-skin-oppia-feedback-container" *ngIf="data.oppiaResponse !== '' && feedbackIsEnabled">
+<div class="conversation-skin-oppia-feedback-container"
+     *ngIf="data.oppiaResponse !== '' && feedbackIsEnabled">
   <img class="conversation-skin-oppia-avatar rounded-circle"
        [src]="oppiaAvatarImageUrl"
        alt="">
   <div *ngIf="!data.oppiaResponse && isCurrentCardAtEndOfTranscript()"
-       class="e2e-test-input-response-loading-dots">
-    <div class="conversation-skin-feedback-dot-one"></div>
-    <div class="conversation-skin-feedback-dot-two"></div>
-    <div class="conversation-skin-feedback-dot-three"></div>
+       class="e2e-test-input-response-loading-dots"
+       dir="auto">
+    <div class="oppia-rte-viewer conversation-skin-oppia-feedback-content">
+      <loading-dots></loading-dots>
+    </div>
   </div>
   <span id="getInputResponsePairId()"></span>
   <div dir="auto">