Render performance consideration; Cancelling processes fixed

src/js/components/GridItem.js

@@ -25,6 +25,10 @@ export default class GridItem extends React.Component{
 		}
 	}
 
+	shouldComponentUpdate(nextProps, nextState){
+		return nextProps.item != this.props.item
+	}
+
 	renderSecondary(item){
 		var output = ''
 

src/js/components/Notifications.js

@@ -38,44 +38,46 @@ export default class Notifications extends React.Component{
 		)
 	}
 
+	renderProcess(process){
+		switch (process.status){
+			case 'running':
+				return(
+					<div className="process notification" key={process.key}>
+						<div className="loader"></div>
+						{process.message}
+						<FontAwesome name="close" className="close-button" onClick={e => {this.props.uiActions.cancelProcess(process.key)}} />
+					</div>
+				)
+
+			case 'cancelling':
+				return(
+					<div className="process notification cancelling" key={process.key}>
+						<div className="loader"></div>
+						Cancelling
+					</div>
+				)
+
+			case 'cancelled':
+			case 'finished':
+				return null
+		}
+	}
+
 	renderProcesses(){
 		if (!this.props.processes || this.props.processes.length <= 0) return null
-		var processes = this.props.processes
-		var items = []
 
-		for (var key in processes){
-			if (processes.hasOwnProperty(key)){
-				switch (processes[key].status){
-
-					case 'running':
-						items.push(
-							<div className="process notification" key={key}>
-								<div className="loader"></div>
-								{processes[key].message}
-								<FontAwesome name="close" className="close-button" onClick={e => this.props.uiActions.cancelProcess(key)} />
-							</div>
-						)
-						break
-
-					case 'cancelling':
-						items.push(
-							<div className="process notification cancelling" key={key}>
-								<div className="loader"></div>
-								Cancelling
-							</div>
-						)
-						break
-
-					case 'cancelled':
-					case 'finished':
-						break
-				}
+		var processes = []
+		for (var key in this.props.processes){
+			if (this.props.processes.hasOwnProperty(key)){
+				processes.push(this.props.processes[key])
 			}
 		}
 
 		return (
 			<span>
-				{items}
+				{processes.map(process => {
+					return this.renderProcess(process)
+				})}
 			</span>
 		)
 	}

src/js/services/ui/actions.js

@@ -201,6 +201,7 @@ export function runProcess(key,data = {}){
 }
 
 export function cancelProcess(key){
+    console.log('cancel process',key)
     return { 
         type: 'CANCEL_PROCESS',
         key: key

src/js/views/discover/DiscoverCategory.js

@@ -66,7 +66,7 @@ class DiscoverCategory extends React.Component{
 					<section className="grid-wrapper">
 						<PlaylistGrid playlists={playlists} />
 					</section>
-					<LazyLoadListener enabled={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
+					<LazyLoadListener loading={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
 				</div>
 			</div>
 		);

src/js/views/discover/DiscoverNewReleases.js

@@ -112,7 +112,7 @@ class DiscoverNewReleases extends React.Component{
 				<section className="content-wrapper grid-wrapper">
 					<AlbumGrid albums={albums} />
 				</section>
-				<LazyLoadListener enabled={this.props.new_releases_more} loadMore={ () => this.loadMore() }/>
+				<LazyLoadListener loading={this.props.new_releases_more} loadMore={ () => this.loadMore() }/>
 			</div>
 		);
 	}