From 35439cb82d185d1117bfc9ff2e49aaf8b73cb76f Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 27 Jun 2017 09:37:33 +1200
Subject: [PATCH] Removing placeholder elements in favor of loader - simpler is
 better

---
 src/js/views/Playlist.js |  96 +++++++++++++---------------------
 src/js/views/User.js     | 108 +++++++++++++++++++--------------------
 2 files changed, 88 insertions(+), 116 deletions(-)

diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index 3f6fb33e..411ce934 100755
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@@ -141,9 +141,11 @@ class Playlist extends React.Component{
 	}
 
 	render(){
+		if (!this.props.playlist) return null
 
 		var scheme = helpers.uriSource( this.props.params.uri )
 		var context = 'playlist'
+		if (this.props.playlist.can_edit) context = 'editable-playlist'
 		var user_id = helpers.getFromUri('userid',this.props.params.uri)
 		var playlist_id = helpers.getFromUri('playlistid',this.props.params.uri)
 
@@ -155,70 +157,44 @@ class Playlist extends React.Component{
 			)
 		}
 
-		if (this.props.playlist){
-			if (this.props.playlist.can_edit) context = 'editable-playlist'
+		return (
+			<div className="view playlist-view content-wrapper">
+			
+				<SidebarToggleButton />
 
-			return (
-				<div className="view playlist-view content-wrapper">
-				
-					<SidebarToggleButton />
-
-					<div className="thumbnail-wrapper">
-						<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
-					</div>
-
-					<div className="title">
-						<h1>{ this.props.playlist.name }</h1>
-						{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
-
-						<ul className="details">
-							<li className="has-tooltip">
-								<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />
-								<span className="tooltip">
-									{helpers.uriSource( this.props.params.uri )} playlist
-								</span>
-							</li>
-							{ this.props.playlist.owner ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
-							{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
-							{ this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
-							<li>
-								{ this.props.playlist.tracks_total ? this.props.playlist.tracks_total : '0'} tracks,&nbsp;
-								{ this.props.playlist.tracks ? <Dater type="total-time" data={this.props.playlist.tracks} /> : '0 mins' }
-							</li>
-						</ul>
-					</div>
-
-					{ this.renderActions() }
-
-					<section className="list-wrapper">
-						{ this.props.playlist.tracks ? <TrackList uri={this.props.params.uri} className="playlist-track-list" context={context} tracks={this.props.playlist.tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null }
-						<LazyLoadListener enabled={this.props.playlist.tracks_more} loadMore={ () => this.loadMore() }/>
-					</section>
+				<div className="thumbnail-wrapper">
+					<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
 				</div>
-			)
 
-		} else {
-			return (
-				<div className="view playlist-view">				
-					<SidebarToggleButton />
-					<Thumbnail size="large" />
-					<div className="title">
-						<div className="source grey-text">
-							Playlist
-						</div>
-						<h1><span className="placeholder"></span></h1>
-						<ul className="details">
-							<li>
-								<span className="placeholder"></span>
-							</li>
-						</ul>
-					</div>					
-					<div className="actions">
-						<button className="placeholder">&nbsp;</button>
-					</div>
+				<div className="title">
+					<h1>{ this.props.playlist.name }</h1>
+					{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
+
+					<ul className="details">
+						<li className="has-tooltip">
+							<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />
+							<span className="tooltip">
+								{helpers.uriSource( this.props.params.uri )} playlist
+							</span>
+						</li>
+						{ this.props.playlist.owner ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
+						{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
+						{ this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
+						<li>
+							{ this.props.playlist.tracks_total ? this.props.playlist.tracks_total : '0'} tracks,&nbsp;
+							{ this.props.playlist.tracks ? <Dater type="total-time" data={this.props.playlist.tracks} /> : '0 mins' }
+						</li>
+					</ul>
 				</div>
-			)
-		}
+
+				{ this.renderActions() }
+
+				<section className="list-wrapper">
+					{ this.props.playlist.tracks ? <TrackList uri={this.props.params.uri} className="playlist-track-list" context={context} tracks={this.props.playlist.tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null }
+					<LazyLoadListener enabled={this.props.playlist.tracks_more} loadMore={ () => this.loadMore() }/>
+				</section>
+			</div>
+		)
 	}
 }
 
diff --git a/src/js/views/User.js b/src/js/views/User.js
index f2ba7f2a..67f597e0 100755
--- a/src/js/views/User.js
+++ b/src/js/views/User.js
@@ -44,75 +44,71 @@ class User extends React.Component{
 	}
 
 	render(){
-		if (this.props.user){
-			var playlists = []
-			if (this.props.user.playlists_uris){
-				for (var i = 0; i < this.props.user.playlists_uris.length; i++){
-					var uri = this.props.user.playlists_uris[i]
-					if (this.props.playlists.hasOwnProperty(uri)){
-						playlists.push(this.props.playlists[uri])
-					}
-				}
-			}
-
-			if (this.props.user && this.props.user.images ){
-				var image = helpers.sizedImages(this.props.user.images).huge
-			} else {
-				var image = null
-			}
-
+		var user_id = helpers.getFromUri('userid',this.props.params.uri)
+		if (helpers.isLoading(this.props.load_queue,['spotify_users/'+user_id,'spotify_users/'+user_id+'/playlists/?'])){
 			return (
-				<div className="view user-view">
-
-					<SidebarToggleButton />
-
-					<div className="intro">
-						<Parallax image={image} />
-						<div className="liner">
-							<Thumbnail image={image} canZoom circle />
-							<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
-							<h2>
-								<ul className="details">
-									<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
-									<li>{this.props.user.followers.total.toLocaleString()} followers</li>
-									{this.isMe() ? <li>You</li> : null}
-								</ul>
-							</h2>
-							<div className="actions">
-								<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
-							</div>
-						</div>
-					</div>
-					
-					<div className="content-wrapper">
-						<section className="grid-wrapper">
-							<h4>Playlists</h4>
-							<PlaylistGrid playlists={playlists} />
-							<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
-						</section>
-					</div>
+				<div className="body-loader">
+					<div className="loader"></div>
 				</div>
 			)
-		} else {
+		}
 
-			return (
-				<div className="view user-view">
-					<div className="intro">
-						<Thumbnail circle size="medium" images={[]} />
-						<h1><span className="placeholder"></span></h1>
+		if (!this.props.user) return null
+
+		var playlists = []
+		if (this.props.user.playlists_uris){
+			for (var i = 0; i < this.props.user.playlists_uris.length; i++){
+				var uri = this.props.user.playlists_uris[i]
+				if (this.props.playlists.hasOwnProperty(uri)){
+					playlists.push(this.props.playlists[uri])
+				}
+			}
+		}
+
+		if (this.props.user && this.props.user.images ){
+			var image = helpers.sizedImages(this.props.user.images).huge
+		} else {
+			var image = null
+		}
+
+		return (
+			<div className="view user-view">
+
+				<SidebarToggleButton />
+
+				<div className="intro">
+					<Parallax image={image} />
+					<div className="liner">
+						<Thumbnail image={image} canZoom circle />
+						<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
+						<h2>
+							<ul className="details">
+								<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
+								<li>{this.props.user.followers.total.toLocaleString()} followers</li>
+								{this.isMe() ? <li>You</li> : null}
+							</ul>
+						</h2>
 						<div className="actions">
-							<button className="placeholder"></button>
+							<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
 						</div>
 					</div>
 				</div>
-			);
-		}
-
+				
+				<div className="content-wrapper">
+					<section className="grid-wrapper">
+						<h4>Playlists</h4>
+						<PlaylistGrid playlists={playlists} />
+						<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
+					</section>
+				</div>
+			</div>
+		)
 	}
 }
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		spotify_authorized: state.spotify.authorized,
 		me: state.spotify.me,
 		playlists: state.ui.playlists,