fix loading state indicator sytling in p/all

src/App.js

@@ -67,6 +67,7 @@ export default function App() {
   
 
   // check for new version
+  // TODO: delete this code and toast when v1.0.0 is released
   useEffect(() => {
     const fetchVersionInfo = async () => {
       try {
@@ -80,7 +81,6 @@ export default function App() {
           localStorage.setItem('infoToast', newVersionInfo);
         }
 
-        // Check for commit hash if commitRef is defined
         if (commitRef.length > 0) {
           const commitRes = await fetch('https://api.github.com/repos/plebbit/plebchan/commits?per_page=1&sha=development', { cache: 'no-cache' });
           const commitData = await commitRes.json();

src/components/styled/views/Board.styled.jsx

@@ -1428,6 +1428,36 @@ export const TopBar = styled.div`
   }
 
   @media (min-width: 480px) {
+    .stats-all-container {
+      float: right;
+      margin-top: 3px;
+      margin-right: 30px;
+      overflow: hidden;
+      max-width: calc(100vw - 50vw);
+    }
+
+    #stats-all {
+      display: inline-block;
+      max-width: calc(100vw - 50vw);
+      word-wrap: break-word;
+      white-space: nowrap;
+      text-overflow: "";
+      overflow: hidden;
+    }
+
+    .ellipsis-all {
+      white-space: nowrap;
+    }
+
+    .ellipsis-all:after {
+      content: "\\2026";
+      position: absolute;
+      -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
+      animation: ellipsis steps(4,end) 1500ms infinite;
+      width: 0px;
+      overflow: hidden;
+    }
+
     #catalog-button-mobile {
       display: none;
     }
@@ -1450,6 +1480,37 @@ export const TopBar = styled.div`
   @media (max-width: 480px) {
     line-height: 25px;
 
+    .stats-all-container {
+      height: 20px;
+      position: absolute;
+      margin-top: 13px;
+      text-align: left;
+      overflow: hidden;
+      width: 100vw;
+    }
+
+    #stats-all {
+      display: inline-block;
+      max-width: 90vw;
+      word-wrap: break-word;
+      white-space: nowrap;
+      text-overflow: "";
+      overflow: hidden;
+    }
+
+    .ellipsis-all {
+      white-space: nowrap;
+    }
+
+    .ellipsis-all:after {
+      content: "\\2026";
+      position: absolute;
+      -webkit-animation: ellipsis steps(4,end) 1200ms infinite;
+      animation: ellipsis steps(4,end) 1500ms infinite;
+      width: 0px;
+      overflow: hidden;
+    }
+
     hr {
       display: none;
     }

src/components/views/All.jsx

@@ -666,9 +666,12 @@ const All = () => {
           {subplebbits.state === "succeeded" ? (
             null
           ) : (
-            <div id="stats" style={{float: "right", marginTop: "5px"}}>
+          <div className="stats-all-container">
-              <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
+            <span id="stats-all">
-            </div>
+              {stateString}
+            </span>
+            <span className={stateString ? "ellipsis-all" : ""} />
+          </div>
           )}
           <div id="catalog-button-mobile">
             <span className="btn-wrap">