Piggyback lazyloader for track loading

mopidy_iris/static/app.js

@@ -16665,8 +16665,8 @@ var LazyLoadListener = function (_React$Component) {
 		value: function render() {
 			return _react2.default.createElement(
 				'div',
-				{ className: "lazy-loader body-loader" + (this.state.loading ? ' loading' : '') },
+				{ className: "lazy-loader body-loader" + (this.state.loading || this.props.forceLoader ? ' loading' : '') },
-				this.state.loading ? _react2.default.createElement('div', { className: 'loader' }) : null
+				this.state.loading || this.props.forceLoader ? _react2.default.createElement('div', { className: 'loader' }) : null
 			);
 		}
 	}]);
@@ -64500,6 +64500,12 @@ var Album = function (_React$Component) {
 				}
 			}
 
+			if (tracks.length <= 0 && helpers.isLoading(this.props.load_queue, ['spotify_albums/' + helpers.getFromUri('albumid', this.props.params.uri)])) {
+				var is_loading_tracks = true;
+			} else {
+				var is_loading_tracks = false;
+			}
+
 			return _react2.default.createElement(
 				'div',
 				{ className: 'view album-view content-wrapper' },
@@ -64573,7 +64579,7 @@ var Album = function (_React$Component) {
 					'section',
 					{ className: 'list-wrapper' },
 					_react2.default.createElement(_TrackList2.default, { className: 'album-track-list', tracks: tracks, uri: this.props.params.uri }),
-					_react2.default.createElement(_LazyLoadListener2.default, { loading: this.props.album.tracks_more, loadMore: function loadMore() {
+					_react2.default.createElement(_LazyLoadListener2.default, { loading: this.props.album.tracks_more, forceLoader: is_loading_tracks, loadMore: function loadMore() {
 							return _this2.loadMore();
 						} })
 				)
@@ -64970,16 +64976,6 @@ var Artist = function (_React$Component) {
 
 				default:
 
-					var tracks = [];
-					if (this.props.artist.tracks_uris && this.props.tracks) {
-						for (var i = 0; i < this.props.artist.tracks_uris.length; i++) {
-							var uri = this.props.artist.tracks_uris[i];
-							if (this.props.tracks.hasOwnProperty(uri)) {
-								tracks.push(this.props.tracks[uri]);
-							}
-						}
-					}
-
 					var sort_options = [{
 						value: 'name',
 						label: 'Name'
@@ -64991,6 +64987,22 @@ var Artist = function (_React$Component) {
 						label: 'Tracks'
 					}];
 
+					var tracks = [];
+					if (this.props.artist.tracks_uris && this.props.tracks) {
+						for (var i = 0; i < this.props.artist.tracks_uris.length; i++) {
+							var uri = this.props.artist.tracks_uris[i];
+							if (this.props.tracks.hasOwnProperty(uri)) {
+								tracks.push(this.props.tracks[uri]);
+							}
+						}
+					}
+
+					if (tracks.length <= 0 && helpers.isLoading(this.props.load_queue, ['spotify_artists/' + helpers.getFromUri('artistid', this.props.params.uri) + '/top-tracks'])) {
+						var is_loading_tracks = true;
+					} else {
+						var is_loading_tracks = false;
+					}
+
 					return _react2.default.createElement(
 						'div',
 						{ className: 'body overview' },
@@ -65005,7 +65017,8 @@ var Artist = function (_React$Component) {
 							_react2.default.createElement(
 								'div',
 								{ className: 'list-wrapper' },
-								_react2.default.createElement(_TrackList2.default, { className: 'artist-track-list', uri: this.props.params.uri, tracks: tracks })
+								_react2.default.createElement(_TrackList2.default, { className: 'artist-track-list', uri: this.props.params.uri, tracks: tracks }),
+								_react2.default.createElement(_LazyLoadListener2.default, { forceLoader: is_loading_tracks })
 							)
 						),
 						_react2.default.createElement('div', { className: 'col w5' }),
@@ -65506,6 +65519,12 @@ var Playlist = function (_React$Component) {
 				}
 			}
 
+			if (tracks.length <= 0 && helpers.isLoading(this.props.load_queue, ['spotify_users/' + user_id + '/playlists/' + playlist_id, 'spotify_users/' + user_id + '/playlists/' + playlist_id + '/tracks'])) {
+				var is_loading_tracks = true;
+			} else {
+				var is_loading_tracks = false;
+			}
+
 			return _react2.default.createElement(
 				'div',
 				{ className: 'view playlist-view content-wrapper' },
@@ -65576,7 +65595,7 @@ var Playlist = function (_React$Component) {
 						}, reorderTracks: function reorderTracks(indexes, index) {
 							return _this3.reorderTracks(indexes, index);
 						} }),
-					_react2.default.createElement(_LazyLoadListener2.default, { loading: this.props.playlist.tracks_more, loadMore: function loadMore() {
+					_react2.default.createElement(_LazyLoadListener2.default, { loading: this.props.playlist.tracks_more, forceLoader: is_loading_tracks, loadMore: function loadMore() {
 							return _this3.loadMore();
 						} })
 				)

mopidy_iris/static/index.html

@@ -73,7 +73,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1523657295";
+	var build = "1523668283";
 	var version = "3.16.3";
 
 	// Construct the script tag

src/js/components/LazyLoadListener.js

@@ -33,8 +33,8 @@ export default class LazyLoadListener extends React.Component{
 
 	render(){
 		return (
-			<div className={"lazy-loader body-loader"+(this.state.loading ? ' loading' : '')}>
+			<div className={"lazy-loader body-loader"+(this.state.loading || this.props.forceLoader ? ' loading' : '')}>
-				{this.state.loading ? <div className="loader"></div> : null}
+				{this.state.loading || this.props.forceLoader ? <div className="loader"></div> : null}
 			</div>
 		)
 	}

src/js/views/Album.js

@@ -137,6 +137,12 @@ class Album extends React.Component{
 			}
 		}
 
+		if (tracks.length <= 0 && helpers.isLoading(this.props.load_queue,['spotify_albums/'+helpers.getFromUri('albumid',this.props.params.uri)])){
+			var is_loading_tracks = true;
+		} else {
+			var is_loading_tracks = false;
+		}
+
 		return (
 			<div className="view album-view content-wrapper">
 				<div className="thumbnail-wrapper">
@@ -165,7 +171,7 @@ class Album extends React.Component{
 
 				<section className="list-wrapper">
 					<TrackList className="album-track-list" tracks={tracks} uri={this.props.params.uri} />
-					<LazyLoadListener loading={this.props.album.tracks_more} loadMore={ () => this.loadMore() }/>
+					<LazyLoadListener loading={this.props.album.tracks_more} forceLoader={is_loading_tracks} loadMore={() => this.loadMore()}/>
 				</section>
 
 			</div>

src/js/views/Artist.js

@@ -174,16 +174,6 @@ class Artist extends React.Component{
 
 			default:
 
-				var tracks = [];
-				if (this.props.artist.tracks_uris && this.props.tracks){
-					for (var i = 0; i < this.props.artist.tracks_uris.length; i++){
-						var uri = this.props.artist.tracks_uris[i]
-						if (this.props.tracks.hasOwnProperty(uri)){
-							tracks.push(this.props.tracks[uri])
-						}
-					}
-				}
-
 				var sort_options = [
 					{
 						value: 'name',
@@ -199,12 +189,29 @@ class Artist extends React.Component{
 					}
 				];
 
+				var tracks = [];
+				if (this.props.artist.tracks_uris && this.props.tracks){
+					for (var i = 0; i < this.props.artist.tracks_uris.length; i++){
+						var uri = this.props.artist.tracks_uris[i]
+						if (this.props.tracks.hasOwnProperty(uri)){
+							tracks.push(this.props.tracks[uri])
+						}
+					}
+				}
+
+				if (tracks.length <= 0 && helpers.isLoading(this.props.load_queue,['spotify_artists/'+helpers.getFromUri('artistid',this.props.params.uri)+'/top-tracks'])){
+					var is_loading_tracks = true;
+				} else {
+					var is_loading_tracks = false;
+				}
+
 				return (
 					<div className="body overview">
 						<div className={"top-tracks col w"+(related_artists.length > 0 ? "70" : "100")}>
 							<h4>Top tracks</h4>
 							<div className="list-wrapper">
 								<TrackList className="artist-track-list" uri={this.props.params.uri} tracks={tracks} />
+								<LazyLoadListener forceLoader={is_loading_tracks} />
 							</div>
 						</div>
 

src/js/views/Playlist.js

@@ -190,6 +190,12 @@ class Playlist extends React.Component{
 			}
 		}
 
+		if (tracks.length <= 0 && helpers.isLoading(this.props.load_queue,['spotify_users/'+user_id+'/playlists/'+playlist_id, 'spotify_users/'+user_id+'/playlists/'+playlist_id+'/tracks'])){
+			var is_loading_tracks = true;
+		} else {
+			var is_loading_tracks = false;
+		}
+
 		return (
 			<div className="view playlist-view content-wrapper">
 				<div className="thumbnail-wrapper">
@@ -216,7 +222,7 @@ class Playlist extends React.Component{
 
 				<section className="list-wrapper">
 					<TrackList uri={this.props.params.uri} className="playlist-track-list" context={context} tracks={tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } />
-					<LazyLoadListener loading={this.props.playlist.tracks_more} loadMore={ () => this.loadMore() }/>
+					<LazyLoadListener loading={this.props.playlist.tracks_more} forceLoader={is_loading_tracks} loadMore={() => this.loadMore()}/>
 				</section>
 			</div>
 		)