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;
   }

src/components/views/Board.jsx

@@ -530,7 +530,7 @@ const Board = () => {
             </>
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
-              <span>{stateString}</span>
+              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
             </div>
           )}
           <div id="catalog-button-mobile">

src/components/views/Catalog.jsx

@@ -445,7 +445,7 @@ const Catalog = () => {
           </>
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
-              <span>{stateString}</span>
+              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
             </div>
           )}
           <div id="return-button-mobile">

src/components/views/Pending.jsx

@@ -195,7 +195,7 @@ const Pending = () => {
             <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
             ]
           </span>
-            <span className="reply-stat">{stateString}</span>
+            <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
           <hr />
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />

src/components/views/Thread.jsx

@@ -507,10 +507,10 @@ const Thread = () => {
                 <span className="reply-stat">No replies yet</span>
               )
             ) : (
-              <span className="reply-stat">{stateString}</span>
+              <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
             )
           ) : (
-            <span className="reply-stat">{stateString}</span>
+            <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
           )}
           <hr />
         </TopBar>
@@ -1080,10 +1080,10 @@ const Thread = () => {
                           <span className="reply-stat">No replies yet</span>
                         )
                       ) : (
-                        <span className="reply-stat">{stateString}</span>
+                        <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
                       )
                     ) : (
-                      <span className="reply-stat">{stateString}</span>
+                      <span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
                     )}
                     <hr />
                   </div>