UI loaders where possible

src/js/views/library/LibraryAlbums.js

@@ -128,6 +128,17 @@ class LibraryAlbums extends React.Component{
 	}
 
 	render(){
+		if (helpers.isLoading(this.props.load_queue,['spotify_me/albums'])){
+			return (
+				<div className="view library-albums-view">
+					<Header icon="cd" title="My albums" />
+					<div className="body-loader">
+						<div className="loader"></div>
+					</div>
+				</div>
+			)
+		}
+
 		var albums = []
 
 		if (this.props.library_albums && this.props.albums){
@@ -207,6 +218,7 @@ class LibraryAlbums extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		view: state.ui.library_albums_view,
 		albums: state.ui.albums,
 		sort: (state.ui.library_albums_sort ? state.ui.library_albums_sort : 'name'),

src/js/views/library/LibraryArtists.js

@@ -90,6 +90,16 @@ class LibraryArtists extends React.Component{
 	}
 
 	render(){
+		if (helpers.isLoading(this.props.load_queue,['spotify_me/following?type=artist'])){
+			return (
+				<div className="view library-albums-view">
+					<Header icon="cd" title="My albums" />
+					<div className="body-loader">
+						<div className="loader"></div>
+					</div>
+				</div>
+			)
+		}
 
 		var artists = []
 		if (this.props.library_artists && this.props.artists){
@@ -157,6 +167,7 @@ class LibraryArtists extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		artists: state.ui.artists,
 		sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : 'name'),
 		sort_reverse: (state.ui.library_artists_sort_reverse ? true : false),

src/js/views/library/LibraryLocalAlbums.js

@@ -171,6 +171,7 @@ class LibraryLocalAlbums extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		mopidy_connected: state.mopidy.connected,
 		albums: state.ui.albums,
 		local_albums: state.ui.local_albums,

src/js/views/library/LibraryLocalArtists.js

@@ -80,6 +80,7 @@ class LibraryLocalArtists extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		mopidy_connected: state.mopidy.connected,
 		local_artists: state.ui.local_artists,
 		artists: state.ui.artists

src/js/views/library/LibraryLocalDirectory.js

@@ -102,6 +102,7 @@ class LibraryLocalDirectory extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		mopidy_connected: state.mopidy.connected,
 		directory: state.mopidy.directory
 	}

src/js/views/library/LibraryPlaylists.js

@@ -43,7 +43,17 @@ class LibraryPlaylists extends React.Component{
 	}
 
 	renderView(){
-		if( !this.props.library_playlists || !this.props.playlists ) return null
+		if (helpers.isLoading(this.props.load_queue,['spotify_me/playlists'])){
+			return (
+				<div className="body-loader">
+					<div className="loader"></div>
+				</div>
+			)
+		}
+
+		if (!this.props.library_playlists || !this.props.playlists ){
+			return null
+		}
 
 		var playlists = []
 		for (var i = 0; i < this.props.library_playlists.length; i++){
@@ -166,6 +176,7 @@ class LibraryPlaylists extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		view: state.ui.library_playlists_view,
 		sort: (state.ui.library_playlists_sort ? state.ui.library_playlists_sort : 'name'),
 		sort_reverse: (state.ui.library_playlists_sort_reverse ? true : false),

src/js/views/library/LibraryTracks.js

@@ -8,6 +8,7 @@ import TrackList from '../../components/TrackList'
 import Header from '../../components/Header'
 import LazyLoadListener from '../../components/LazyLoadListener'
 
+import * as helpers from '../../helpers'
 import * as mopidyActions from '../../services/mopidy/actions'
 import * as spotifyActions from '../../services/spotify/actions'
 
@@ -27,6 +28,17 @@ class LibraryTracks extends React.Component{
 	}
 
 	render(){
+		if (helpers.isLoading(this.props.load_queue,['spotify_me/tracks'])){
+			return (
+				<div className="view library-tracks-view">
+					<Header icon="music" title="My tracks" />
+					<div className="body-loader">
+						<div className="loader"></div>
+					</div>
+				</div>
+			)
+		}
+
 		return (
 			<div className="view library-tracks-view">
 				<Header icon="music" title="My tracks" />
@@ -48,6 +60,7 @@ class LibraryTracks extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		tracks: state.spotify.library_tracks,
 		tracks_more: state.spotify.library_tracks_more
 	}