making the loading indicator less obtrusive (and smaller, to boot)

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);
+			}
 		});
 	}
 

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>