Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2024-11-15 02:21:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add a little loading indicator for fetch messages

Browse Source
This commit is contained in:
Jeremy Zhang 2018-01-25 10:11:27 +00:00
parent ba8b100e33
commit 1954b5e72d
3 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
webapp/titanembeds/static/css/embedstyle.css
View File

@ -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>*/

4
webapp/titanembeds/static/js/embed.js
View File

@ -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");
});
}

6
webapp/titanembeds/templates/embed.html.j2
View File

@ -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>