Add loading indicator

1 files changed, 7 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>