Removing remaining artistLoaded, albumLoaded, etc in favor of itemLoaded for consistent pipeline; Looking at search

src/js/views/library/LibraryAlbums.js

@@ -18,6 +18,8 @@ import { sortItems, applyFilter } from '../../util/arrays';
 import { collate } from '../../util/format';
 import Button from '../../components/Button';
 import { i18n, I18n } from '../../locale';
+import { isLoading } from '../../util/helpers';
+import Loader from '../../components/Loader';
 
 class LibraryAlbums extends React.Component {
   constructor(props) {
@@ -175,12 +177,17 @@ class LibraryAlbums extends React.Component {
       sort,
       sort_reverse,
       view,
+      load_queue,
     } = this.props;
     const {
       limit,
       filter,
     } = this.state;
 
+    if (isLoading(load_queue, ['(.*):library:albums'])) {
+      return <Loader body loading />;
+    }
+
     let albums = [
       ...(source === 'all' || source === 'spotify' ? collate(spotify_library, { items }).items : []),
       ...(source === 'all' || source === 'google' ? collate(google_library, { items }).items : []),

src/js/views/library/LibraryArtists.js

@@ -12,12 +12,13 @@ import Icon from '../../components/Icon';
 import * as uiActions from '../../services/ui/actions';
 import * as coreActions from '../../services/core/actions';
 import {
-  uriSource,
+  uriSource, isLoading,
 } from '../../util/helpers';
 import { sortItems, applyFilter } from '../../util/arrays';
 import { I18n, i18n } from '../../locale';
 import { collate, collateLibrary } from '../../util/format';
 import Button from '../../components/Button';
+import Loader from '../../components/Loader';
 
 class LibraryArtists extends React.Component {
   constructor(props) {
@@ -155,12 +156,17 @@ class LibraryArtists extends React.Component {
       sort,
       sort_reverse,
       view,
+      load_queue,
     } = this.props;
     const {
       limit,
       filter,
     } = this.state;
 
+    if (isLoading(load_queue, ['(.*):library:artists'])) {
+      return <Loader body loading />;
+    }
+
     let artists = [
       ...(source === 'all' || source === 'spotify' ? collate(spotify_library, { items }).items : []),
       ...(source === 'all' || source === 'google' ? collate(google_library, { items }).items : []),
@@ -342,6 +348,7 @@ const mapStateToProps = (state) => ({
   sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : null),
   sort_reverse: (state.ui.library_artists_sort_reverse ? state.ui.library_artists_sort_reverse : false),
   view: state.ui.library_artists_view,
+  load_queue: state.ui.load_queue,
 });
 
 const mapDispatchToProps = (dispatch) => ({

src/js/views/library/LibraryBrowseDirectory.js

@@ -86,23 +86,31 @@ class LibraryBrowseDirectory extends React.Component {
     });
   }
 
-  playAll(e, tracks) {
-    const tracks_uris = arrayOf('uri', tracks);
-    this.props.mopidyActions.playURIs(tracks_uris, `iris:browse:${this.props.uri}`);
-    this.props.uiActions.hideContextMenu();
+  playAll = (tracks) => {
+    const {
+      uri,
+      mopidyActions: {
+        playURIs,
+      },
+      uiActions: {
+        hideContextMenu,
+      },
+    } = this.props;
+
+    playURIs(arrayOf('uri', tracks), `iris:browse:${uri}`);
+    hideContextMenu();
   }
 
-  goBack(e) {
+  goBack = () => {
+    const { uiActions: { hideContextMenu } } = this.props;
+
     window.history.back();
-    this.props.uiActions.hideContextMenu();
+    hideContextMenu();
   }
 
-  renderBreadcrumbs() {
-    if (this.props.uri) {
-      var parent_uri = this.props.uri;
-    } else {
-      return null;
-    }
+  renderBreadcrumbs = () => {
+    const { uri } = this.props;
+    let parent_uri = uri || null;
 
     if (parent_uri.startsWith('file://')) {
       parent_uri = parent_uri.substring(0, parent_uri.lastIndexOf('/'));
@@ -120,11 +128,12 @@ class LibraryBrowseDirectory extends React.Component {
     return null;
   }
 
-  renderSubdirectories(subdirectories) {
-    if (this.props.view === 'list') {
+  renderSubdirectories = (subdirectories) => {
+    const { view } = this.props;
+
+    if (view === 'list') {
       return (
         <List
-          nocontext
           rows={subdirectories}
           className="library-local-directory-list"
           link_prefix="/library/browse/"
@@ -219,7 +228,7 @@ class LibraryBrowseDirectory extends React.Component {
         />
         {tracks && (
           <Button
-            onClick={(e) => { uiActions.hideContextMenu(); this.playAll(e, all_tracks); }}
+            onClick={() => { uiActions.hideContextMenu(); this.playAll(all_tracks); }}
             noHover
             discrete
             tracking={{ category: 'Directory', action: 'Play' }}

src/js/views/library/LibraryPlaylists.js

@@ -17,6 +17,8 @@ import * as spotifyActions from '../../services/spotify/actions';
 import { applyFilter, removeDuplicates, sortItems } from '../../util/arrays';
 import { I18n, i18n } from '../../locale';
 import { collate } from '../../util/format';
+import { isLoading } from '../../util/helpers';
+import Loader from '../../components/Loader';
 
 class LibraryPlaylists extends React.Component {
   constructor(props) {
@@ -138,12 +140,17 @@ class LibraryPlaylists extends React.Component {
       sort_reverse,
       view,
       source,
+      load_queue,
     } = this.props;
     const {
       filter,
       limit,
     } = this.state;
 
+    if (isLoading(load_queue, ['(.*):library:playlists'])) {
+      return <Loader body loading />;
+    }
+
     let playlists = [
       ...(source === 'all' || source === 'spotify' ? collate(spotify_library, { items }).items : []),
       ...(source === 'all' || source === 'local' ? collate(mopidy_library, { items }).items : []),