Add loading indicator

3 files changed, 13 insertions, 2 deletions

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
--- /dev/null
+++ b/src/static/loading.gif
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;
+}