chat: add simple background animation while a COMM channel is loading

code/chat.js

@@ -142,6 +142,7 @@ window.chat.requestFaction = function(getOlderMsgs, isRetry) {
   if(chat._requestFactionRunning && !isRetry) return;
   if(isIdle()) return renderUpdateStatus();
   chat._requestFactionRunning = true;
+  $("#chatcontrols a:contains('faction')").addClass('loading');
 
   var d = chat.genPostData('faction', chat._faction, getOlderMsgs);
   var r = window.postAjax(
@@ -158,6 +159,7 @@ window.chat.requestFaction = function(getOlderMsgs, isRetry) {
 window.chat._faction = {data:{}, oldestTimestamp:-1, newestTimestamp:-1};
 window.chat.handleFaction = function(data, olderMsgs) {
   chat._requestFactionRunning = false;
+  $("#chatcontrols a:contains('faction')").removeClass('loading');
 
   if(!data || !data.success) {
     window.failedRequestCount++;
@@ -189,6 +191,7 @@ window.chat.requestPublic = function(getOlderMsgs, isRetry) {
   if(chat._requestPublicRunning && !isRetry) return;
   if(isIdle()) return renderUpdateStatus();
   chat._requestPublicRunning = true;
+  $("#chatcontrols a:contains('all')").addClass('loading');
 
   var d = chat.genPostData('all', chat._public, getOlderMsgs);
   var r = window.postAjax(
@@ -204,6 +207,7 @@ window.chat.requestPublic = function(getOlderMsgs, isRetry) {
 window.chat._public = {data:{}, oldestTimestamp:-1, newestTimestamp:-1};
 window.chat.handlePublic = function(data, olderMsgs) {
   chat._requestPublicRunning = false;
+  $("#chatcontrols a:contains('all')").removeClass('loading');
 
   if(!data || !data.success) {
     window.failedRequestCount++;
@@ -236,6 +240,7 @@ window.chat.requestAlerts = function(getOlderMsgs, isRetry) {
   if(chat._requestAlertsRunning && !isRetry) return;
   if(isIdle()) return renderUpdateStatus();
   chat._requestAlertsRunning = true;
+  $("#chatcontrols a:contains('alerts')").addClass('loading');
 
   var d = chat.genPostData('alerts', chat._alerts, getOlderMsgs);
   var r = window.postAjax(
@@ -252,6 +257,7 @@ window.chat.requestAlerts = function(getOlderMsgs, isRetry) {
 window.chat._alerts = {data:{}, oldestTimestamp:-1, newestTimestamp:-1};
 window.chat.handleAlerts = function(data, olderMsgs) {
   chat._requestAlertsRunning = false;
+  $("#chatcontrols a:contains('alerts')").removeClass('loading');
 
   if(!data || !data.success) {
     window.failedRequestCount++;

main.js

@@ -73,7 +73,7 @@ document.getElementsByTagName('body')[0].innerHTML = ''
   + '<div id="chatcontrols" style="display:none">'
   + '<a accesskey="0" title="[0]"><span class="toggle expand"></span></a>'
   + '<a accesskey="1" title="[1]">all</a>'
-  + '<a accesskey="2" title="[2]"class="active">faction</a>'
+  + '<a accesskey="2" title="[2]" class="active">faction</a>'
   + '<a accesskey="3" title="[3]">alerts</a>'
   + '</div>'
   + '<div id="chat" style="display:none">'

style.css

@@ -198,7 +198,7 @@ a:hover {
   border-color: #FFCE00;
   border-bottom-width:0px;
   font-weight:bold;
-  background: rgb(8, 48, 78);1
+  background: rgb(8, 48, 78);
 }
 
 #chatcontrols a.active + a {
@@ -220,6 +220,32 @@ a:hover {
   border-top: 10px solid #FFCE00;
 }
 
+#chatcontrols .loading {
+  background-color: rgba(255,0,0,0.3);
+  -webkit-animation: chatloading 1.2s infinite linear;
+  -moz-animation: chatloading 1.2s infinite linear;
+  animation: chatloading 1.2s infinite linear;
+}
+
+@-webkit-keyframes chatloading {
+    0% { background-color: rgba(255,0,0,0.4) }
+   50% { background-color: rgba(255,0,0,0.1) }
+  100% { background-color: rgba(255,0,0,0.4) }
+}
+
+@-moz-keyframes chatloading {
+    0% { background-color: rgba(255,0,0,0.4) }
+   50% { background-color: rgba(255,0,0,0.1) }
+  100% { background-color: rgba(255,0,0,0.4) }
+}
+
+@keyframes chatloading {
+    0% { background-color: rgba(255,0,0,0.4) }
+   50% { background-color: rgba(255,0,0,0.1) }
+  100% { background-color: rgba(255,0,0,0.4) }
+}
+
+
 
 #chat {
   position: absolute;