From 09505a62313fcf26de4a1e84d7f705eee714bd33 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 10:33:17 +0100
Subject: [PATCH] fix(ellipsis animation): dots could appear cut off and cause
 displacement changing width of string

---
 .../loading-ellipsis.module.css               | 50 +++++++++++++++----
 .../loading-ellipsis/loading-ellipsis.tsx     | 15 +++++-
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/src/components/loading-ellipsis/loading-ellipsis.module.css b/src/components/loading-ellipsis/loading-ellipsis.module.css
index d840bd8e..7e1e6993 100644
--- a/src/components/loading-ellipsis/loading-ellipsis.module.css
+++ b/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: "";
   }
 }
\ No newline at end of file
diff --git a/src/components/loading-ellipsis/loading-ellipsis.tsx b/src/components/loading-ellipsis/loading-ellipsis.tsx
index 639d62f4..b94f4600 100644
--- a/src/components/loading-ellipsis/loading-ellipsis.tsx
+++ b/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;