From 3f72fa116055e9624eb78e7c5eac03827d7a8a31 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Thu, 20 Apr 2023 21:11:08 +0200
Subject: [PATCH] remove fade-in from description (LCP) on page load

---
 public/scripts/ui.js                      | 6 ++++++
 public/styles.css                         | 4 ++--
 public_included_ws_fallback/scripts/ui.js | 6 ++++++
 public_included_ws_fallback/styles.css    | 4 ++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 94542bb..eb944b5 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -57,6 +57,12 @@ class PeersUI {
             console.log("Retrieved edited display name:", displayName)
             if (displayName) Events.fire('self-display-name-changed', displayName);
         });
+
+
+        /* prevent animation on load */
+        setTimeout(_ => {
+            this.$xNoPeers.style.animationIterationCount = "1";
+        }, 300);
     }
 
     _insertDisplayName(displayName) {
diff --git a/public/styles.css b/public/styles.css
index 463e6bf..860424d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -405,10 +405,10 @@ x-no-peers {
     flex-direction: column;
     padding: 8px;
     text-align: center;
-    /* prevent flickering on load */
     animation: fade-in 300ms;
-    animation-delay: 500ms;
     animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }
 
 x-no-peers h2,
diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js
index 9c72d12..71dc0a8 100644
--- a/public_included_ws_fallback/scripts/ui.js
+++ b/public_included_ws_fallback/scripts/ui.js
@@ -57,6 +57,12 @@ class PeersUI {
             console.log("Retrieved edited display name:", displayName)
             if (displayName) Events.fire('self-display-name-changed', displayName);
         });
+
+
+        /* prevent animation on load */
+        setTimeout(_ => {
+            this.$xNoPeers.style.animationIterationCount = "1";
+        }, 300);
     }
 
     _insertDisplayName(displayName) {
diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
index b5385c3..33db610 100644
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -415,10 +415,10 @@ x-no-peers {
     flex-direction: column;
     padding: 8px;
     text-align: center;
-    /* prevent flickering on load */
     animation: fade-in 300ms;
-    animation-delay: 500ms;
     animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }
 
 x-no-peers h2,