From 0941fbc0cdc4c90cdf009656679d38037b21b04c Mon Sep 17 00:00:00 2001
From: Aldrin Jenson <aldrinjenson@gmail.com>
Date: Wed, 26 May 2021 18:12:39 +0530
Subject: [PATCH] Fix lag on albumList toggling (#1136)
---
ui/src/album/AlbumList.js | 39 +++++++++++++++++++++++++--------------
1 file changed, 25 insertions(+), 14 deletions(-)
diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js
index 920f95524..809f9bfd4 100644
--- a/ui/src/album/AlbumList.js
+++ b/ui/src/album/AlbumList.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
import { Redirect, useLocation } from 'react-router-dom'
import {
AutocompleteInput,
@@ -20,7 +20,7 @@ import AlbumGridView from './AlbumGridView'
import { AddToPlaylistDialog } from '../dialogs'
import albumLists, { defaultAlbumList } from './albumLists'
import config from '../config'
-import useSelectedFields from '../common/useSelectedFields'
+import { setToggleableFields, setOmittedFields } from '../actions'
const AlbumFilter = (props) => {
const translate = useTranslate()
@@ -66,6 +66,10 @@ const AlbumList = (props) => {
const albumView = useSelector((state) => state.albumView)
const [perPage, perPageOptions] = useAlbumsPerPage(width)
const location = useLocation()
+ const toggleableAlbumFields = useSelector(
+ (state) => state.settings.toggleableFields
+ )?.album
+ const dispatch = useDispatch()
const albumListType = location.pathname
.replace(/^\/album/, '')
@@ -74,17 +78,24 @@ const AlbumList = (props) => {
// Workaround to force album columns to appear the first time.
// See https://github.com/navidrome/navidrome/pull/923#issuecomment-833004842
// TODO: Find a better solution
- useSelectedFields({
- resource: 'album',
- columns: {
- artist: 'artist',
- songCount: 'songCount',
- playCount: 'playCount',
- year: 'year',
- duration: 'duration',
- rating: 'rating',
- },
- })
+
+ useEffect(() => {
+ if (!toggleableAlbumFields) {
+ dispatch(
+ setToggleableFields({
+ album: {
+ artist: true,
+ songCount: true,
+ playCount: true,
+ year: true,
+ duration: true,
+ rating: true,
+ },
+ })
+ )
+ dispatch(setOmittedFields({ album: [] }))
+ }
+ }, [dispatch, toggleableAlbumFields])
// If it does not have filter/sort params (usually coming from Menu),
// reload with correct filter/sort params