From cd1e26418dfc9ee839c7fa392388a0a5ae22a2b7 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian.lam@gmail.com>
Date: Fri, 22 Nov 2013 21:30:34 -0500
Subject: [PATCH] making the loading indicator less obtrusive (and smaller, to
boot)
---
public/src/app.js | 15 +++++++++------
public/templates/topic.tpl | 8 +++-----
2 files changed, 12 insertions(+), 11 deletions(-)
diff --git a/public/src/app.js b/public/src/app.js
index 43a00581f8..b7f714f0f0 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -423,14 +423,16 @@ var socket,
app.infiniteLoaderActive = false;
app.loadMorePosts = function (tid, callback) {
+ var indicatorEl = $('.loading-indicator');
+
if (app.infiniteLoaderActive) {
return;
}
app.infiniteLoaderActive = true;
- if ($('#loading-indicator').attr('done') === '0') {
- $('#loading-indicator').removeClass('hide');
+ if (indicatorEl.attr('done') === '0') {
+ indicatorEl.fadeIn();
}
socket.emit('api:topic.loadMore', {
@@ -439,14 +441,15 @@ var socket,
}, function (data) {
app.infiniteLoaderActive = false;
if (data.posts.length) {
- $('#loading-indicator').attr('done', '0');
+ indicatorEl.attr('done', '0');
app.createNewPosts(data, true);
} else {
- $('#loading-indicator').attr('done', '1');
+ indicatorEl.attr('done', '1');
}
- $('#loading-indicator').addClass('hide');
- if (callback)
+ indicatorEl.fadeOut();
+ if (callback) {
callback(data.posts);
+ }
});
}
diff --git a/public/templates/topic.tpl b/public/templates/topic.tpl
index 343c4a4013..8f8ff6a8c5 100644
--- a/public/templates/topic.tpl
+++ b/public/templates/topic.tpl
@@ -193,13 +193,11 @@
<!-- END posts -->
</ul>
- <div id="loading-indicator" style="text-align:center;" class="hide" done="0">
- <i class="icon-spinner icon-spin icon-large"></i>
- </div>
-
-
<div class="well col-md-11 col-xs-12 pull-right hide">
<div class="topic-main-buttons pull-right inline-block hide">
+ <div class="loading-indicator" done="0">
+ Loading More Posts <i class="icon-refresh icon-spin"></i>
+ </div>
<button class="btn btn-primary post_reply" type="button">[[topic:reply]]</button>
<div class="btn-group thread-tools hide">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">[[topic:thread_tools.title]] <span class="caret"></span></button>