Service worker caching, Loader component

src/js/views/modals/AddToPlaylist.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import ReactGA from 'react-ga';
-import Link from '../../components/Link';
 
+import Loader from '../../components/Loader';
 import Modal from './Modal';
 import Icon from '../../components/Icon';
 import Thumbnail from '../../components/Thumbnail';
@@ -14,7 +14,7 @@ import * as mopidyActions from '../../services/mopidy/actions';
 import * as spotifyActions from '../../services/spotify/actions';
 import * as helpers from '../../helpers';
 
-class AddToPlaylist extends React.Component {
+class AddToPlaylist extends React.Component {
   constructor(props) {
     super(props);
 
@@ -41,26 +41,19 @@ class AddToPlaylist extends React.Component {
 
     playlists = helpers.sortItems(playlists, 'name');
 
-    let loader = null;
-    if (this.props.spotify_library_playlists_status == 'running') {
-      loader = (
-        <div className="lazy-loader body-loader loading">
-          <div className="loader" />
-        </div>
-      );
-    }
+    const isLoading = this.props.spotify_library_playlists_status == 'running';
 
     return (
       <Modal className="modal--add-to-playlist">
         <h1>Add to playlist</h1>
-        <h2 className="mid_grey-text">
-Select playlist to add
-          {this.props.uris.length}
-          {' '}
-track
-          {this.props.uris.length > 1 ? 's' : null}
-          {' '}
-to
+        <h2 className="mid_grey-text">
+Select playlist to add
+          {this.props.uris.length}
+          {' '}
+track
+          {this.props.uris.length > 1 ? 's' : null}
+          {' '}
+to
         </h2>
         {playlists.length <= 0 ? <div className="no-results">No playlists available</div> : null}
         <div className="list small playlists">
@@ -71,21 +64,21 @@ to
     <h4 className="list__item__name">{ playlist.name }</h4>
     <ul className="list__item__details details">
       <li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
-      <li>
-        { playlist.tracks_total ? (
-          <span className="mid_grey-text">
-            { playlist.tracks_total }
-            {' '}
-tracks
-          </span>
-        ) : null }
+      <li>
+        { playlist.tracks_total ? (
+          <span className="mid_grey-text">
+            { playlist.tracks_total }
+            {' '}
+tracks
+          </span>
+        ) : null }
       </li>
     </ul>
   </div>
 						))
 					}
         </div>
-        {loader}
+        {isLoading && <Loader body lazy loading />}
       </Modal>
     );
   }
@@ -111,4 +104,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(AddToPlaylist);
+export default connect(mapStateToProps, mapDispatchToProps)(AddToPlaylist);