From 94d89f58ac5a049a9bc52acdf101b1de89c2cadc Mon Sep 17 00:00:00 2001
From: Jeremy Zhang <jkzhang@uw.edu>
Date: Wed, 26 Apr 2017 19:12:35 +0000
Subject: [PATCH] Small fetching indicator

---
 titanembeds/static/css/embedstyle.css |  8 ++++++++
 titanembeds/static/js/embed.js        |  2 ++
 titanembeds/templates/embed.html.j2   | 11 +++++++++++
 3 files changed, 21 insertions(+)

diff --git a/titanembeds/static/css/embedstyle.css b/titanembeds/static/css/embedstyle.css
index 46ee4b8..c56c598 100644
--- a/titanembeds/static/css/embedstyle.css
+++ b/titanembeds/static/css/embedstyle.css
@@ -177,3 +177,11 @@ background-color: #546e7a;
 a {
   color: #82b1ff;
 }
+
+#fetching-indicator {
+  position: absolute;
+  right: 1vw;
+  bottom: 13px;
+  width: 25px;
+  height: 25px;
+}
\ No newline at end of file
diff --git a/titanembeds/static/js/embed.js b/titanembeds/static/js/embed.js
index 5139ebe..6d0e32c 100644
--- a/titanembeds/static/js/embed.js
+++ b/titanembeds/static/js/embed.js
@@ -407,6 +407,7 @@
         var channel_id = selected_channel;
         var fet;
         var jumpscroll;
+        $("#fetching-indicator").fadeIn(800);
         if (last_message_id == null) {
             $("#chatcontent").empty();
             fet = fetch(channel_id);
@@ -454,6 +455,7 @@
         });
         fet.always(function() {
             currently_fetching = false;
+            $("#fetching-indicator").fadeOut(800);
         });
     }
 
diff --git a/titanembeds/templates/embed.html.j2 b/titanembeds/templates/embed.html.j2
index 9073734..115e8cb 100644
--- a/titanembeds/templates/embed.html.j2
+++ b/titanembeds/templates/embed.html.j2
@@ -91,6 +91,17 @@
       </div>
 
     <footer id="footer" class="footer">
+      <div id="fetching-indicator" class="preloader-wrapper small active" style="display: none;">
+        <div class="spinner-layer spinner-blue-only">
+          <div class="circle-clipper left">
+            <div class="circle"></div>
+          </div><div class="gap-patch">
+            <div class="circle"></div>
+          </div><div class="circle-clipper right">
+            <div class="circle"></div>
+          </div>
+        </div>
+      </div>
       <div id="footercontainer" class="footercontainer">
         <div class="currentuserchip left" id="nameplate">
           <div class="left"><img id="currentuserimage" src="" class="circle left currentuserimage" style="display: none;"></div>