From bdc768cb27b826fcc3be351e7814599e42f32ffc Mon Sep 17 00:00:00 2001
From: ekzyis <ekzyis@ekzy.is>
Date: Mon, 9 Sep 2024 00:46:11 +0200
Subject: [PATCH] Fix copy button flicker on poll

---
 server/router/pages/components/invoice.templ | 62 ++++++++++----------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/server/router/pages/components/invoice.templ b/server/router/pages/components/invoice.templ
index b972832..20a9538 100644
--- a/server/router/pages/components/invoice.templ
+++ b/server/router/pages/components/invoice.templ
@@ -11,8 +11,8 @@ templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool, r
 		</div>
 		<div class="my-1">{ format(msats) }</div>
 		@InvoiceStatus(hash, expiresIn, paid, redirectUrl)
-		<div class="none" id="bolt11-data" bolt11-data={ templ.JSONString(bolt11) } hx-preserve></div>
-		<script type="text/javascript" id="bolt11-js" hx-preserve>
+		<div class="none" id="bolt11-data" bolt11-data={ templ.JSONString(bolt11) }></div>
+		<script type="text/javascript" id="bolt11-js">
             htmx.on("#close", "click", function () {
                 // abort in-flight polls and prevent new polls
                 htmx.trigger("#poll", "htmx:abort")
@@ -23,25 +23,26 @@ templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool, r
 }
 
 templ InvoiceStatus(hash string, expiresIn int, paid bool, redirectUrl templ.SafeURL) {
-	if paid {
-		<div class="font-mono neon success my-1">PAID</div>
-		<!-- TODO: show timer for redirect -->
-		<div
-			id="poll"
-			hx-get={ string(redirectUrl) }
-			hx-trigger="load delay:3s"
-			hx-target="#content"
-			hx-swap="outerHTML"
-			hx-select="#content"
-			hx-push-url="true"
-			hx-select-oob="#modal"
-		></div>
-	} else if expiresIn <= 0 {
-		<div class="font-mono neon error my-1">EXPIRED</div>
-	} else {
-		<!-- invoice is pending -->
-		<div class="font-mono my-1" id="countdown" countdown-data={ templ.JSONString(expiresIn) } hx-preserve></div>
-		<script type="text/javascript" id="countdown-js" hx-preserve>
+	<div id="status">
+		if paid {
+			<div class="font-mono neon success my-1">PAID</div>
+			<!-- TODO: show timer for redirect -->
+			<div
+				id="poll"
+				hx-get={ string(redirectUrl) }
+				hx-trigger="load delay:3s"
+				hx-target="#content"
+				hx-swap="outerHTML"
+				hx-select="#content"
+				hx-push-url="true"
+				hx-select-oob="#modal"
+			></div>
+		} else if expiresIn <= 0 {
+			<div class="font-mono neon error my-1">EXPIRED</div>
+		} else {
+			<!-- invoice is pending -->
+			<div class="font-mono my-1" id="countdown" countdown-data={ templ.JSONString(expiresIn) } hx-preserve></div>
+			<script type="text/javascript" id="countdown-js" hx-preserve>
             var expiresIn = JSON.parse($("#countdown").getAttribute("countdown-data"))
 
             function pad(num, places) {
@@ -64,15 +65,16 @@ templ InvoiceStatus(hash string, expiresIn int, paid bool, redirectUrl templ.Saf
             _countdown()
             var interval = setInterval(_countdown, 1000)
         </script>
-		<div
-			id="poll"
-			hx-get={ string(templ.SafeURL("/invoice/" + hash)) }
-			hx-trigger="load delay:1s"
-			hx-target="#modal"
-			hx-swap="outerHTML"
-			hx-select="#modal"
-		></div>
-	}
+			<div
+				id="poll"
+				hx-get={ string(templ.SafeURL("/invoice/" + hash)) }
+				hx-trigger="load delay:1s"
+				hx-target="#status"
+				hx-swap="outerHTML"
+				hx-select="#status"
+			></div>
+		}
+	</div>
 }
 
 func format(msats int) string {