From 3476daa046ca287a3868536778e1a53382edcafb Mon Sep 17 00:00:00 2001
From: Jonas Kohl
Date: Thu, 25 Jul 2024 14:55:32 +0200
Subject: Add loading indicator

---
 src/pages/guestbook.php |   9 +++++++--
 src/static/loading.gif  | Bin 0 -> 8328 bytes
 src/static/style.css    |   6 ++++++
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/static/loading.gif

diff --git a/src/pages/guestbook.php b/src/pages/guestbook.php
index d04c3ec..e7c3e28 100644
--- a/src/pages/guestbook.php
+++ b/src/pages/guestbook.php
@@ -3,9 +3,9 @@
 
 <h1>Guestbook</h1>
 
-<div id="guestbook_frame"></div>
+<div id="guestbook_frame" class="is-loading"></div>
 <p><a href="#" id="emoticon-guide"><span>Emoticon guide</span></a></p>
-<div id="guestbook"></div>
+<div id="guestbook" class="is-loading h32"></div>
 
 <script type="text/javascript" src="/static/jquery-1.12.4.min.js"></script>
 <script type="text/javascript" src="/emoticons.js"></script>
@@ -42,6 +42,9 @@ $(function() {
             .attr("id", "gbframe")
             .attr("frameborder", "0")
             .attr("src", "//guestbook.hozyro.jkohl.link/?__e=1&__p[ok_target]=_top&__p[ok_url]=" + encodeURIComponent(location.href))
+            .on("load", function() {
+                $("#guestbook_frame").removeClass("is-loading");
+            })
     );
     $("#emoticon-guide").click(function(e) {
         e.preventDefault();
@@ -99,6 +102,8 @@ function _gbcb(data) {
                     .html(replace_emoticons(nl2br(htmlentities(entry.content))))
             ).appendTo("#guestbook")
     })
+
+    $("#guestbook").removeClass("h32 is-loading");
 }
 </script>
 <script type="text/javascript" src="//guestbook.hozyro.jkohl.link/?__m=ajax&amp;__r=jsonp&amp;__c=_gbcb"></script>
diff --git a/src/static/loading.gif b/src/static/loading.gif
new file mode 100644
index 0000000..b8c493b
Binary files /dev/null and b/src/static/loading.gif differ
diff --git a/src/static/style.css b/src/static/style.css
index bfa6465..0e5e198 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -169,3 +169,9 @@ a {
 #emoticon-guide:hover {
     background-position: 0 -22px;
 }
+.is-loading {
+    background: url("loading.gif") center no-repeat;
+}
+.h32 {
+    height: 32px;
+}
-- 
cgit v1.2.3