add ellipsis animation for loading state strings

src/components/styled/Board.styled.jsx

@@ -1402,6 +1402,31 @@ export const TopBar = styled.div`
       }
   }}
 
+  .ellipsis {
+    margin-right: 14px;
+  }
+
+  .ellipsis:after {
+    content: "\\2026";
+    position: absolute;
+    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
+    animation: ellipsis steps(4,end) 1500ms infinite;
+    width: 0px;
+    overflow: hidden;
+  }
+
+  @keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+
+  @-webkit-keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+
   @media (min-width: 480px) {
     #catalog-button-mobile {
       display: none;

src/components/styled/Thread.styled.jsx

@@ -227,6 +227,31 @@ export const TopBar = styled.div`
     }
   }
 
+  .ellipsis {
+    margin-right: 18px !important;
+  }
+
+  .ellipsis:after {
+    content: "\\2026";
+    position: absolute;
+    -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
+    animation: ellipsis steps(4,end) 1500ms infinite;
+    width: 0px;
+    overflow: hidden;
+  }
+
+  @keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+
+  @-webkit-keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+
   .return-button {
     display: inline-block;
   }