* VRFS-3467 - previews are 20 seconds long indicator on jamtracks

web/app/assets/javascripts/jam_track_preview.js.coffee

@@ -35,6 +35,7 @@ context.JK.JamTrackPreview = class JamTrackPreview
     @part = @root.find('.part')
     @loading = @root.find('.loading')
     @loadingText = @root.find('.loading-text')
+    @loadingTextText = @root.find('.loading-text-text')
 
     @playButton.on('click', @play)
     @stopButton.on('click', @stop)
@@ -43,10 +44,12 @@ context.JK.JamTrackPreview = class JamTrackPreview
     instrumentId = null
     instrumentDescription = '?'
     if @jamTrackTrack.track_type == 'Track'
+      @loadingTextText.text('20 second preview loading')
       if @jamTrackTrack.instrument
         instrumentId = @jamTrackTrack.instrument.id
         instrumentDescription = @jamTrackTrack.instrument.description
     else
+      @loadingTextText.text('preview loading')
       instrumentId = 'other'
       instrumentDescription= 'Master Mix'
 
@@ -122,8 +125,8 @@ context.JK.JamTrackPreview = class JamTrackPreview
 
   onHowlerLoad: () =>
     @loaded = true
-    @loading.fadeOut();
-    @loadingText.fadeOut(); #addClass('hidden')
+    @loading.fadeOut(2000);
+    @loadingText.fadeOut(2000); #addClass('hidden')
 
   play: (e) =>
     if e?

web/app/assets/javascripts/react-components/JamTrackPreview.js.jsx.coffee

@@ -33,9 +33,16 @@ ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
       activeButton = `<a className={playButtonClasses} onClick={this.play} />`
 
     loaders = []
+    if @props.jamTrackTrack.track_type == 'Track'
+      loading_text = '20 second preview loading'
+    else
+      loading_text = 'preview loading'
+
+
     if @state.loading
-      loaders.push `<div key="spinner" className="loading spinner-small"></div>`
-      loaders.push `<div key="text" className="loading-text">preview loading</div>`
+      loaders.push `<div key="text" className="loading-text">{loading_text}
+        <div className="loading spinner-small"></div>
+      </div>`
 
 
     `<div className="jam-track-preview" data-track-type={this.props.jamTrackTrack.track_type} data-id={this.props.jamTrackTrack.id}>

web/app/assets/stylesheets/client/jamTrackPreview.css.scss

@@ -71,7 +71,7 @@
   .spinner-small {
     vertical-align: middle;
     top: -4px;
-    right: -32px;
+    left:160px;
     position:absolute;
     &.hidden {
       display:none;
@@ -80,15 +80,16 @@
 
   .loading-text {
     position:absolute;
-    right:-135px;
-    top:0;
-    padding:0 3px;
+    top:25px;
+    left:0;
+    padding:0 7px;
     font-style:italic;
     z-index:1;
     -webkit-border-radius:10px;
     -moz-border-radius:10px;
     border-radius:10px;
     border:0 solid black;
+    background-color:black;
   }
 
   .adds-line-break {

web/app/assets/stylesheets/client/jamkazam.css.scss

@@ -699,3 +699,7 @@ $ReactSelectVerticalPadding: 3px;
     box-sizing: border-box;
     margin-top: -1px;
 }
+
+.Select-search-prompt {
+    padding:3px 0 !important;
+}

web/app/assets/stylesheets/client/jamtrackSearch.css.scss

@@ -225,7 +225,6 @@
     white-space:nowrap;
 
     .loading-text {
-      right:-115px;
       background-color:#262626;
     }
   }

web/app/assets/stylesheets/landings/individual_jamtrack.css.scss

@@ -103,7 +103,7 @@ body.web.landing_jamtrack.individual_jamtrack {
 
     .loading-text {
       right:-1px;
-      background-color:#262626;
+      background-color:black;
     }
   }
 

web/app/views/clients/_jam_track_preview.html.slim

@@ -7,5 +7,7 @@ script type="text/template" id='template-jam-track-preview'
     .instrument-part
     .instrument-name
     .part
-    .loading.spinner-small.hidden
-    .loading-text.hidden preview loading
+
+    .loading-text.hidden
+      .loading-text-text preview loading
+      .loading.spinner-small.hidden