Option to disable grid glow (firefox performance issue); Using process for library loading (WIP)

src/js/views/discover/DiscoverNewReleases.js

@@ -11,10 +11,12 @@ import Loader from '../../components/Loader';
 import * as uiActions from '../../services/ui/actions';
 import * as mopidyActions from '../../services/mopidy/actions';
 import * as spotifyActions from '../../services/spotify/actions';
-import { isLoading } from '../../util/helpers';
 import { i18n, I18n } from '../../locale';
 import Button from '../../components/Button';
-import { indexToArray } from '../../util/arrays';
+import {
+  makeItemSelector,
+  makeLoadingSelector,
+} from '../../util/selectors';
 
 class DiscoverNewReleases extends React.Component {
   componentDidMount() {
@@ -37,14 +39,14 @@ class DiscoverNewReleases extends React.Component {
 
   loadMore = () => {
     const {
-      new_releases_more,
+      more,
       spotifyActions: {
         getMore,
       },
     } = this.props;
 
     getMore(
-      new_releases_more,
+      more,
       null,
       {
         type: 'SPOTIFY_NEW_RELEASES_LOADED',
@@ -92,14 +94,13 @@ class DiscoverNewReleases extends React.Component {
 
   render = () => {
     const {
-      load_queue,
-      items,
-      new_releases,
-      new_releases_more,
+      loading,
+      albums,
+      more,
       uiActions,
     } = this.props;
 
-    if (isLoading(load_queue, ['(.*)new-releases(.*)offset=0(.*)'])) {
+    if (loading) {
       return (
         <div className="view discover-new-releases-view">
           <Header>
@@ -111,8 +112,6 @@ class DiscoverNewReleases extends React.Component {
       );
     }
 
-    const albums = indexToArray(items, new_releases || []);
-
     const options = (
       <Button
         noHover
@@ -134,8 +133,8 @@ class DiscoverNewReleases extends React.Component {
           <AlbumGrid albums={albums} />
         </section>
         <LazyLoadListener
-          loadKey={new_releases_more}
-          showLoader={new_releases_more}
+          loadKey={more}
+          showLoader={more}
           loadMore={this.loadMore}
         />
       </div>
@@ -143,14 +142,29 @@ class DiscoverNewReleases extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  theme: state.ui.theme,
-  load_queue: state.ui.load_queue,
-  items: state.core.items,
-  new_releases: (state.spotify.new_releases ? state.spotify.new_releases : null),
-  new_releases_more: (state.spotify.new_releases_more ? state.spotify.new_releases_more : null),
-  new_releases_total: (state.spotify.new_releases_total ? state.spotify.new_releases_total : null),
-});
+const mapStateToProps = (state) => {
+  const {
+    ui: {
+      theme,
+    },
+    spotify: {
+      new_releases: uris,
+      new_releases_more: more,
+      new_releases_total: total,
+    },
+  } = state;
+  const loadingSelector = makeLoadingSelector(['(.*)new-releases(.*)offset=0(.*)']);
+  const itemSelector = makeItemSelector(uris);
+
+  return {
+    uris,
+    loading: loadingSelector(state),
+    albums: itemSelector(state),
+    more,
+    total,
+    theme,
+  };
+};
 
 const mapDispatchToProps = (dispatch) => ({
   uiActions: bindActionCreators(uiActions, dispatch),