fix(ellipsis animation): dots could appear cut off and cause displacement changing width of string

src/components/loading-ellipsis/loading-ellipsis.module.css

@@ -1,22 +1,52 @@
+.nowrap {
+  white-space: nowrap;
+}
+
+.ellipsis {
+  display: inline-block;
+  width: 4ch;
+}
+
 .ellipsis:after {
-  overflow: hidden;
   display: inline-block;
-  position: absolute;
   vertical-align: bottom;
-  -webkit-animation: ellipsis steps(4,end) 1500ms infinite;      
-  animation: ellipsis steps(4,end) 1500ms infinite;
-  content: "\2026"; /* ascii code for the ellipsis character */
-  width: 0px;
+  -webkit-animation: ellipsis 1500ms steps(4, end) infinite;
+  animation: ellipsis 1500ms steps(4, end) infinite;
+  content: "";
 }
 
 @keyframes ellipsis {
-  to {
-    width: 1.25em;    
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
   }
 }
 
 @-webkit-keyframes ellipsis {
-  to {
-    width: 1.25em;    
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
   }
 }

src/components/loading-ellipsis/loading-ellipsis.tsx

@@ -5,7 +5,20 @@ interface LoadingEllipsisProps {
 }
 
 const LoadingEllipsis = ({ string }: LoadingEllipsisProps) => {
-  return <span className={styles.ellipsis}>{string}</span>;
+  const words = string.split(' ');
+  const lastWord = words.pop();
+  const restOfString = words.join(' ');
+
+  return (
+    <span>
+      {restOfString}
+      {restOfString && ' '}
+      <span className={styles.nowrap}>
+        {lastWord}
+        <span className={styles.ellipsis} />
+      </span>
+    </span>
+  );
 };
 
 export default LoadingEllipsis;