--- a/cms/app-client/app/components/playlist-component.js	Fri Dec 02 13:27:02 2016 +0100
+++ b/cms/app-client/app/components/playlist-component.js	Fri Dec 02 15:30:16 2016 +0100
@@ -71,7 +71,9 @@
         },
 
         displayTranscript: function() {
-            this.get('player').displayAdditionalInformation('transcript');
+            this.get('player').set('transcriptLoading', (this.get('player.window') !== 'transcript'));
+
+            Ember.run.later(() => { this.get('player').displayAdditionalInformation('transcript'); }, 10);
         },
 
         displayNotice: function() {

--- a/cms/app-client/app/components/transcript-component.js	Fri Dec 02 13:27:02 2016 +0100
+++ b/cms/app-client/app/components/transcript-component.js	Fri Dec 02 15:30:16 2016 +0100
@@ -45,6 +45,7 @@
           });
         }
         this.set('intervals', intervals);
+        this.get('player').set('transcriptLoading', false);
     },
 
     onScroll() {

--- a/cms/app-client/app/services/player.js	Fri Dec 02 13:27:02 2016 +0100
+++ b/cms/app-client/app/services/player.js	Fri Dec 02 15:30:16 2016 +0100
@@ -6,6 +6,7 @@
     item: null,
     model: null,
     transcript: null,
+    transcriptLoading: false,
 
     window: false,
     playing: false,
@@ -31,8 +32,12 @@
     displayMetadata: function(el) {
          if(typeof el !== 'undefined') {
             this.set('window', el);
+            if(el==='transcript') {
+              this.set('transcriptLoading', true);
+            }
         } else {
             this.set('window', false);
+            this.set('transcriptLoading', false);
         }
     },
 

--- a/cms/app-client/app/templates/components/playlist-component.hbs	Fri Dec 02 13:27:02 2016 +0100
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Fri Dec 02 15:30:16 2016 +0100
@@ -12,7 +12,11 @@
         <div class="tools">
             <div>
             {{#if document.transcript_url}}
+                {{#if (ifAnd (eq player.item document.id) player.transcriptLoading) }}
+                <i class="fa fa-circle-o-notch fa-spin" aria-hidden="true" {{action 'displayTranscript' bubbles=false}}></i>
+                {{else}}
                 <i title="Transcript" class="fa fa-text-height{{if (ifAnd (eq player.window 'transcript') (eq player.item document.id)) ' active'}}"{{action 'displayTranscript' bubbles=false}}>Transcript</i>
+                {{/if}}
             {{/if}}
             {{#if (ifAnd (eq player.playing true) (eq player.item document.id))}}
                 <i title="Pause" class="fa fa-pause" {{ action 'pause' bubbles=false }}>Pause</i>