Fix block direction in loading animation for RTL (#3316)

* Make loader blocks mirrored on RTL

* Whoops, forgot to change names

* Fix problems with flipping back

src/components/loader/loader.css

@@ -42,6 +42,18 @@
     animation: bottom-slide-in 1.5s ease infinite;
 }
 
+[dir="rtl"] .top-block {
+    animation: top-slide-in-rtl 1.5s ease infinite;
+}
+
+[dir="rtl"] .middle-block {
+    animation: middle-slide-in-rtl 1.5s ease infinite;
+}
+
+[dir="rtl"] .bottom-block {
+    animation: bottom-slide-in-rtl 1.5s ease infinite;
+}
+
 @keyframes top-slide-in {
   0% {
     transform: translateY(50px);
@@ -88,6 +100,60 @@
   }
 }
 
+@keyframes top-slide-in-rtl {
+  0% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  33% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+}
+
+@keyframes middle-slide-in-rtl {
+  0% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  33% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  66% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+}
+
+@keyframes bottom-slide-in-rtl {
+  0% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  66% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+}
+
 .message-container-outer {
     height: 30px;
     overflow: hidden;