From 1954b5e72de32c3f4023c1e69476d9035c205177 Mon Sep 17 00:00:00 2001
From: Jeremy Zhang <jkzhang@uw.edu>
Date: Thu, 25 Jan 2018 10:11:27 +0000
Subject: [PATCH] Add a little loading indicator for fetch messages

---
 webapp/titanembeds/static/css/embedstyle.css | 17 +++++++++++++++++
 webapp/titanembeds/static/js/embed.js        |  4 ++++
 webapp/titanembeds/templates/embed.html.j2   |  6 ++++++
 3 files changed, 27 insertions(+)

diff --git a/webapp/titanembeds/static/css/embedstyle.css b/webapp/titanembeds/static/css/embedstyle.css
index cac0953..83e832e 100644
--- a/webapp/titanembeds/static/css/embedstyle.css
+++ b/webapp/titanembeds/static/css/embedstyle.css
@@ -895,6 +895,23 @@ p.mentioned span.chatmessage {
   background-color: red;
 }
 
+#message-spinner {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -30vh;
+  margin-left: -5vw;
+  display: none;
+}
+
+#message-spinner > div {
+  background-color: white;
+}
+
+#message-spinner.error > div {
+  background-color: pink;
+}
+
 /* CSS Variables */
 :root {
   /*--<var>: <value>*/
diff --git a/webapp/titanembeds/static/js/embed.js b/webapp/titanembeds/static/js/embed.js
index edcb8e4..bee6be4 100644
--- a/webapp/titanembeds/static/js/embed.js
+++ b/webapp/titanembeds/static/js/embed.js
@@ -1135,6 +1135,7 @@
         var channel_id = selected_channel;
         var fet;
         var jumpscroll;
+        $("#message-spinner").fadeIn();
         if (last_message_id == null) {
             $("#chatcontent").empty();
             fet = fetch(channel_id);
@@ -1167,6 +1168,8 @@
                 fill_unauthenticated_users(guildobj.embedmembers.unauthenticated);
                 $("#instant-inv").attr("href", guildobj.instant_invite);
             });
+            $("#message-spinner").removeClass("error");
+            $("#message-spinner").fadeOut();
         });
         fet.fail(function(data) {
             if (data.status == 403) {
@@ -1177,6 +1180,7 @@
                 Materialize.toast('Session expired! You have been logged out.', 10000);
             }
             setVisitorMode(true);
+            $("#message-spinner").addClass("error");
         });
     }
     
diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2
index 6e1022b..8d8b60b 100644
--- a/webapp/titanembeds/templates/embed.html.j2
+++ b/webapp/titanembeds/templates/embed.html.j2
@@ -6,6 +6,7 @@
     <!--Import materialize.css-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" integrity="sha256-e22BQKCF7bb/h/4MFJ1a4lTRR2OuAe8Hxa/3tgU5Taw=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css" integrity="sha256-90Y+fvi28WF+3jKH4tHEkoQ9WLeFKJjpvCPNOtU9ZvU=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/1.2.5/spinners/2-double-bounce.min.css" integrity="sha256-EUobIj2z8wTjkWEwkjqubfq0NEqgOoNScgHP1oUSU7M=" crossorigin="anonymous" />
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/embedstyle.css') }}">
     <link id="css-theme" type="text/css" rel="stylesheet" href="">
     
@@ -51,6 +52,11 @@
       </nav>
     </div>
     <main>
+      <div id="message-spinner" class="sk-double-bounce">
+        <div class="sk-child sk-double-bounce1"></div>
+        <div class="sk-child sk-double-bounce2"></div>
+      </div>
+      
       <div id="chatcontent" class="chatcontent"></div>
     </main>