diff --git a/static/js/hlsreader.js b/static/js/hlsreader.js
index 14b2baa..152fdd0 100644
--- a/static/js/hlsreader.js
+++ b/static/js/hlsreader.js
@@ -12,8 +12,7 @@ $(document).ready(function() {
 	if ($(this).children().attr('class').match('badge-secondary')) {
 	    m3u8Url = $(this).siblings('span').attr('data-item').trim();
 	    targetId = $(this).siblings('span').attr('data-target-id').trim();
-    	    appendMediaPlaylist(targetId, m3u8Url, $(this).attr('href').slice(1), $(this).parent());
-	    $(this).children().removeClass('badge-secondary').addClass('badge-info').text("Media Playlist");
+    	    appendMediaPlaylist(targetId, m3u8Url, $(this).attr('href').slice(1), $(this).parent(), $(this).children(), "Media Playlist");
 	}	
     });
 
@@ -21,8 +20,7 @@ $(document).ready(function() {
 	if ($(this).children().attr('class').match('badge-secondary')) {
 	    m3u8Url = $(this).siblings('span').attr('data-item').trim();
 	    targetId = $(this).siblings('span').attr('data-target-id').trim();
-	    appendMediaPlaylist(targetId, m3u8Url, $(this).attr('href').slice(1), $(this).parent());
-	    $(this).children().removeClass('badge-secondary').addClass('badge-info').text("Alternative Media Playlist");
+	    appendMediaPlaylist(targetId, m3u8Url, $(this).attr('href').slice(1), $(this).parent(), $(this).children(), "Alternative Media Playlist");	    
 	}	
     });
 
@@ -56,20 +54,24 @@ function readM3u8(m3u8Url, selector) {
     });
 }
 
-function appendMediaPlaylist(variantInfo, m3u8Url, elementId, element) {
+function appendMediaPlaylist(variantInfo, m3u8Url, elementId, element, badge, badgeText) {
+    originalBadgeText = badge.text();
+    badge.text("loading...");
     $.ajax({
     	url: 'http://220.230.118.50:8080',
     	type: 'POST',
     	data: {
     	    m3u8Url: m3u8Url,
-	    variantInfo: variantInfo	    
+	    variantInfo: variantInfo
     	},
     	dataType: 'text',
     	success: function (result) {	    
-	    element.append('<ul class="collapse" id=\"' + elementId + '\">' + result + '</ul>');	    
+	    element.append('<ul class="collapse" id=\"' + elementId + '\">' + result + '</ul>');
+	    badge.removeClass('badge-secondary').addClass('badge-info').text(badgeText);
     	},
     	error: function (xhr, status, errorThrown) {
-    	    alert('failed');
+	    badge.text(originalBadgeText);
+	    alert(errorThrown);
     	}
     });
 }