From 2e2e0c1eb8b1322453a973110cf0bb19506e8126 Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Tue, 16 May 2023 12:40:29 +0200
Subject: [PATCH] add ellipsis animation for loading state strings

---
 src/components/styled/Board.styled.jsx  | 25 +++++++++++++++++++++++++
 src/components/styled/Thread.styled.jsx | 25 +++++++++++++++++++++++++
 src/components/views/Board.jsx          |  2 +-
 src/components/views/Catalog.jsx        |  2 +-
 src/components/views/Pending.jsx        |  2 +-
 src/components/views/Thread.jsx         |  8 ++++----
 6 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/src/components/styled/Board.styled.jsx b/src/components/styled/Board.styled.jsx
index 6d2c329f..8ba5e343 100644
--- a/src/components/styled/Board.styled.jsx
+++ b/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;
diff --git a/src/components/styled/Thread.styled.jsx b/src/components/styled/Thread.styled.jsx
index 6c682581..203d5440 100644
--- a/src/components/styled/Thread.styled.jsx
+++ b/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;
   }
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 382db702..1a91aa86 100644
--- a/src/components/views/Board.jsx
+++ b/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">
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 2ac3b44e..1b3aea69 100644
--- a/src/components/views/Catalog.jsx
+++ b/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">
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx
index 1bf32654..868bd435 100644
--- a/src/components/views/Pending.jsx
+++ b/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" />
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index d8df9438..af3768dc 100644
--- a/src/components/views/Thread.jsx
+++ b/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>