Lazy loading thumbnails

src/js/components/AlbumGrid.js

@@ -40,6 +40,7 @@ class AlbumGrid extends React.Component{
 									type="album"
 									item={album}
 									onClick={e => {hashHistory.push(global.baseURL+'album/'+album.uri)}}
+									onLoad={() => this.handleLoad(album.uri)}
 									onContextMenu={e => this.handleContextMenu(e,album)}
 								/>
 							)}

src/js/components/GridItem.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { Router, Link, hashHistory } from 'react-router'
 import FontAwesome from 'react-fontawesome'
-import LazyLoad from 'react-lazyload'
 
 import Thumbnail from './Thumbnail'
 import ArtistSentence from './ArtistSentence'
@@ -33,35 +32,35 @@ export default class GridItem extends React.Component{
 
 			case 'playlist':
 				return (
-					<span>
+					<div className="secondary">
 						{item.tracks_total ? item.tracks_total+' tracks' : null}
 						{item.can_edit ? <FontAwesome name="edit" /> : null}
-					</span>
+					</div>
 				)
 				break
 
 			case 'artist':
 				return (
-					<span>
+					<div className="secondary">
 						{item.followers ? item.followers.total.toLocaleString()+' followers' : item.albums_uris.length+' albums'}
-					</span>
+					</div>
 				)
 				break
 
 			case 'album':
 				return (
-					<span>
+					<div className="secondary">
 						{item.artists ? <ArtistSentence artists={item.artists} /> : null}
-					</span>
+					</div>
 				)
 				break
 
 			default:
 				return (
-					<span>
+					<div className="secondary">
 						{ item.artists ? <ArtistSentence artists={ item.artists } /> : null }
 						{ item.followers ? item.followers.total.toLocaleString()+' followers' : null }
-					</span>
+					</div>
 				)
 		}
 
@@ -76,7 +75,7 @@ export default class GridItem extends React.Component{
 			item.album.added_at = item.added_at;
 			item = item.album;
 		}
-		var images = []		
+		var images = null
 		if (this.props.item.images) {
 			images = this.props.item.images
 		} else if (this.props.item.icons){
@@ -85,13 +84,9 @@ export default class GridItem extends React.Component{
 
 		return (
 			<div className="grid-item" onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
-				<LazyLoad height={10} placeholder={<Thumbnail size="medium" />}>
-					<Thumbnail size="medium" images={images} />
-				</LazyLoad>
-				<div className="name">{item.name ? item.name : item.uri}</div>
-				<div className="secondary">
-					{ this.renderSecondary(item) }
-				</div>
+				<Thumbnail size="medium" images={images} />
+				<div className="name">{item.name ? item.name : <span className="dark-grey-text">{item.uri}</span>}</div>
+				{ this.renderSecondary(item) }
 			</div>
 		);
 	}

src/js/components/Thumbnail.js

@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
+import LazyLoad from 'react-lazyload'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -65,7 +66,6 @@ class Thumbnail extends React.Component{
 
 	render(){
 		var image = this.mapImageSizes()
-		var style = { backgroundImage: 'url("'+image+'")' }
 		var class_name = 'thumbnail '
 		if( this.props.size ) class_name += ' '+this.props.size
 		if( this.props.circle ) class_name += ' circle'
@@ -78,8 +78,13 @@ class Thumbnail extends React.Component{
 
 		return (
 			<div className={class_name}>
-				<div className="image" style={style}></div>
+
+				<LazyLoad height={10} placeholder={<div className="image"></div>}>
+					<div className="image loaded" style={{backgroundImage: 'url("'+image+'")'}}></div>
+				</LazyLoad>
+
 				{zoom_icon}
+
 			</div>
 		);
 	}

src/js/services/mopidy/middleware.js

@@ -842,10 +842,12 @@ const MopidyMiddleware = (function(){
 
                         var uris = helpers.arrayOf('uri',response)
 
+                        /*
                         store.dispatch({ 
                             type: 'MOPIDY_GET_ALBUMS',
                             uris: uris//.slice(0,50) THIS PAGINATES REQUESTS. Slow servers might need this...
                         });
+                        */
 
                         store.dispatch({ 
                             type: 'LIBRARY_ALBUMS_LOADED',