From 3d0fc9861d71d819538a145addd8e4109f856456 Mon Sep 17 00:00:00 2001
From: Maharshi Mishra <maharshi@tor.us>
Date: Wed, 13 Nov 2024 15:39:13 +0700
Subject: [PATCH] Added shimmer loading

---
 .../sfa-web-ton-telegram-example/src/App.css  | 90 +++++++++++++++++--
 .../sfa-web-ton-telegram-example/src/App.tsx  | 28 +++---
 2 files changed, 98 insertions(+), 20 deletions(-)

diff --git a/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css b/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css
index d46f818a..0e75c06d 100644
--- a/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css
+++ b/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css
@@ -301,17 +301,89 @@ body {
  }
 }
 
+/* Add these styles at the end of your App.css */
+
 .breathing-outline {
-  border: 2px dashed rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  animation: breathing 1.5s ease-in-out infinite;
+  position: relative;
+  overflow: hidden;
+  background: var(--card-bg);
+}
+
+.breathing-outline::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 200%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(102, 212, 246, 0.1) 25%,
+    rgba(77, 146, 255, 0.1) 50%,
+    rgba(187, 101, 255, 0.1) 75%,
+    transparent 100%
+  );
+  animation: shimmer 2s infinite linear;
+}
+
+.dark-mode .breathing-outline::before {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(102, 212, 246, 0.05) 25%,
+    rgba(77, 146, 255, 0.05) 50%,
+    rgba(187, 101, 255, 0.05) 75%,
+    transparent 100%
+  );
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(50%);
+  }
 }
 
-@keyframes breathing {
-  0%, 100% {
-    border-color: rgba(0, 0, 0, 0.2);
+.breathing-outline .ellipsed-text,
+.breathing-outline .user-info p {
+  position: relative;
+  overflow: hidden;
+}
+
+.breathing-outline .ellipsed-text::after,
+.breathing-outline .user-info p::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--card-bg);
+  border-radius: 4px;
+}
+
+/* Loading text placeholder styles */
+.loading-placeholder {
+  height: 1em;
+  background: linear-gradient(
+    90deg,
+    var(--border-color) 0%,
+    var(--hover-bg) 50%,
+    var(--border-color) 100%
+  );
+  background-size: 200% 100%;
+  animation: loading 2s infinite linear;
+  border-radius: 4px;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
   }
-  50% {
-    border-color: rgba(0, 0, 0, 0.5);
+  100% {
+    background-position: -200% 0;
   }
-}
+}
\ No newline at end of file
diff --git a/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx b/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx
index ff226aad..20e298f6 100644
--- a/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx
+++ b/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx
@@ -201,32 +201,38 @@ function App() {
               </div>
             </>
           ) : (
-            <p>Loading user info...</p>
+            <div className="user-info" style={{ width: "100%" }}>
+              <div className="loading-placeholder" style={{ width: "60%", marginBottom: "8px" }}></div>
+              <div className="loading-placeholder" style={{ width: "80%", marginBottom: "8px" }}></div>
+              <div className="loading-placeholder" style={{ width: "70%" }}></div>
+            </div>
           )}
         </div>
 
-        <div
-          className={`info-box ${tonAccountAddress ? "" : "breathing-outline"}`}
-          onClick={() => tonAccountAddress && copyToClipboard(tonAccountAddress, "account")}
-        >
+        <div className={`info-box ${tonAccountAddress ? "" : "breathing-outline"}`}>
           <div className="info-box-content">
             <p>
               <strong>TON Account:</strong>
-              <span className="ellipsed-text">{tonAccountAddress || "Loading..."}</span>
+              {tonAccountAddress ? (
+                <span className="ellipsed-text">{tonAccountAddress}</span>
+              ) : (
+                <div className="loading-placeholder" style={{ marginTop: "8px" }}></div>
+              )}
             </p>
             {tonAccountAddress &&
               (copiedStates.account ? <Check className="copy-icon success" size={18} /> : <Copy className="copy-icon" size={18} />)}
           </div>
         </div>
 
-        <div
-          className={`info-box ${signedMessage ? "" : "breathing-outline"}`}
-          onClick={() => signedMessage && copyToClipboard(signedMessage, "message")}
-        >
+        <div className={`info-box ${signedMessage ? "" : "breathing-outline"}`}>
           <div className="info-box-content">
             <p>
               <strong>Signed Message:</strong>
-              <span className="ellipsed-text">{signedMessage || "Loading..."}</span>
+              {signedMessage ? (
+                <span className="ellipsed-text">{signedMessage}</span>
+              ) : (
+                <div className="loading-placeholder" style={{ marginTop: "8px" }}></div>
+              )}
             </p>
             {signedMessage && (copiedStates.message ? <Check className="copy-icon success" size={18} /> : <Copy className="copy-icon" size={18} />)}
           </div>