Convert Loader to CSS modules

Author: shepmaster

ui/frontend/Loader.module.css

@@ -0,0 +1,23 @@
+@keyframes loader-fade {
+  0% {
+    opacity: 0;
+  }
+
+  75% {
+    opacity: 1;
+  }
+}
+
+.dot {
+  animation: loader-fade 1s;
+  animation-iteration-count: infinite;
+  opacity: 0;
+
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+}

ui/frontend/Loader.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
+import styles from './Loader.module.css';
+
 const Loader: React.SFC = () => (
-  <div className="loader">
-    <span className="loader-dot">⬤</span>
-    <span className="loader-dot">⬤</span>
-    <span className="loader-dot">⬤</span>
+  <div>
+    <span className={styles.dot}>⬤</span>
+    <span className={styles.dot}>⬤</span>
+    <span className={styles.dot}>⬤</span>
   </div>
 );
 

ui/frontend/index.scss

@@ -188,31 +188,6 @@ body {
     }
 }
 
-@keyframes loader-fade {
-    0% {
-        opacity: 0;
-    }
-    75% {
-        opacity: 1;
-    }
-}
-
-.loader {
-    &-dot {
-        opacity: 0;
-        animation: loader-fade 1s;
-        animation-iteration-count: infinite;
-
-        &:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-
-        &:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-    }
-}
-
 .language-rust_errors {
     .warning {
         color: #f79a06;