From 281b5b1c54e8d00fca5d9049e1183f8173bf590c Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 22 Aug 2017 08:38:03 +1200
Subject: [PATCH] Context menu playlist loader

---
 src/js/components/ContextMenu.js              | 13 +++++++++++++
 src/js/components/Modal/AddToPlaylistModal.js | 10 ++++++++++
 src/js/components/Modal/Modal.js              |  3 ++-
 src/scss/components/_loader.scss              | 15 ++++++++++++++-
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index b5905923..5cee7839 100755
--- a/src/js/components/ContextMenu.js
+++ b/src/js/components/ContextMenu.js
@@ -248,6 +248,17 @@ class ContextMenu extends React.Component{
 
 		playlists = helpers.sortItems(playlists, 'name')
 
+		var loader = null
+		if (this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR && this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status == 'running'){
+			loader = (
+				<div className="menu-item-wrapper">
+					<div className="menu-item mini-loader loading">
+						<div className="loader"></div>
+					</div>
+				</div>
+			)
+		}
+
 		return (			
 			<div className={this.state.submenu_expanded ? 'submenu expanded' : 'submenu'}>
 				<span className="menu-item-wrapper">
@@ -270,6 +281,7 @@ class ContextMenu extends React.Component{
 						)
 					})
 				}
+				{loader}
 			</div>
 		)
 	}
@@ -589,6 +601,7 @@ class ContextMenu extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		menu: state.ui.context_menu,
+		processes: state.ui.processes,
 		current_track: state.core.current_track,
 		current_tracklist: state.core.current_tracklist,
 		spotify_library_playlists: state.spotify.library_playlists,
diff --git a/src/js/components/Modal/AddToPlaylistModal.js b/src/js/components/Modal/AddToPlaylistModal.js
index 2935ded6..b92a9185 100755
--- a/src/js/components/Modal/AddToPlaylistModal.js
+++ b/src/js/components/Modal/AddToPlaylistModal.js
@@ -34,6 +34,15 @@ export default class AddToPlaylistModal extends React.Component{
 
 		playlists = helpers.sortItems(playlists, 'name')
 
+		var loader = null
+		if (this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR && this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status == 'running'){
+			loader = (
+				<div className='lazy-loader body-loader loading'>
+					<div className="loader"></div>
+				</div>
+			)
+		}
+
 		return (
 			<div>
 				<h1>Add to playlist</h1>
@@ -54,6 +63,7 @@ export default class AddToPlaylistModal extends React.Component{
 						})
 					}
 				</div>
+				{loader}
 			</div>
 		)
 	}
diff --git a/src/js/components/Modal/Modal.js b/src/js/components/Modal/Modal.js
index 2bce1a62..a6291a59 100755
--- a/src/js/components/Modal/Modal.js
+++ b/src/js/components/Modal/Modal.js
@@ -47,7 +47,7 @@ class Modal extends React.Component{
 				</div>
 				<div className="content">
 
-					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} spotifyActions={this.props.spotifyActions} mopidyActions={this.props.mopidyActions} playlists={this.props.playlists} tracks_uris={this.props.modal.data.tracks_uris} spotify_library_playlists={this.props.spotify_library_playlists} mopidy_library_playlists={this.props.mopidy_library_playlists} /> : null }
+					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} spotifyActions={this.props.spotifyActions} mopidyActions={this.props.mopidyActions} playlists={this.props.playlists} tracks_uris={this.props.modal.data.tracks_uris} spotify_library_playlists={this.props.spotify_library_playlists} mopidy_library_playlists={this.props.mopidy_library_playlists} processes={this.props.processes} /> : null }
 					{ this.props.modal.name == 'add_to_queue' ? <AddToQueueModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} /> : null }
 					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} /> : null }
 					{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} data={this.props.modal.data} /> : null }
@@ -78,6 +78,7 @@ const mapStateToProps = (state, ownProps) => {
 		artists: state.core.artists,
 		playlists: state.core.playlists,
 		context_menu: state.ui.context_menu,
+		processes: state.ui.processes,
 		mopidy_connected: state.mopidy.connected,
 		spotify_authorized: state.spotify.authorization,
 		spotify_library_playlists: state.spotify.library_playlists,
diff --git a/src/scss/components/_loader.scss b/src/scss/components/_loader.scss
index 861a24b1..62971ff2 100755
--- a/src/scss/components/_loader.scss
+++ b/src/scss/components/_loader.scss
@@ -64,4 +64,17 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
+
+.mini-loader {
+	.loader {
+		width: 20px;
+		height: 20px;
+		opacity: 1;
+
+		&:before {
+			border-color: darken($secondary_grey, 5%);
+		}
+	}
+}
+