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; 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 */ /* CSS Variables */
:root { :root {
/*--<var>: <value>*/ /*--<var>: <value>*/

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

@ -1135,6 +1135,7 @@
var channel_id = selected_channel; var channel_id = selected_channel;
var fet; var fet;
var jumpscroll; var jumpscroll;
$("#message-spinner").fadeIn();
if (last_message_id == null) { if (last_message_id == null) {
$("#chatcontent").empty(); $("#chatcontent").empty();
fet = fetch(channel_id); fet = fetch(channel_id);
@ -1167,6 +1168,8 @@
fill_unauthenticated_users(guildobj.embedmembers.unauthenticated); fill_unauthenticated_users(guildobj.embedmembers.unauthenticated);
$("#instant-inv").attr("href", guildobj.instant_invite); $("#instant-inv").attr("href", guildobj.instant_invite);
}); });
$("#message-spinner").removeClass("error");
$("#message-spinner").fadeOut();
}); });
fet.fail(function(data) { fet.fail(function(data) {
if (data.status == 403) { if (data.status == 403) {
@ -1177,6 +1180,7 @@
Materialize.toast('Session expired! You have been logged out.', 10000); Materialize.toast('Session expired! You have been logged out.', 10000);
} }
setVisitorMode(true); setVisitorMode(true);
$("#message-spinner").addClass("error");
}); });
} }

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

@ -6,6 +6,7 @@
<!--Import materialize.css--> <!--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/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/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 type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/embedstyle.css') }}">
<link id="css-theme" type="text/css" rel="stylesheet" href=""> <link id="css-theme" type="text/css" rel="stylesheet" href="">
@ -51,6 +52,11 @@
</nav> </nav>
</div> </div>
<main> <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> <div id="chatcontent" class="chatcontent"></div>
</main> </main>