diff --git a/src/renderer/features/albums/components/album-list-header-filters.tsx b/src/renderer/features/albums/components/album-list-header-filters.tsx index e9f77b85..be80a19a 100644 --- a/src/renderer/features/albums/components/album-list-header-filters.tsx +++ b/src/renderer/features/albums/components/album-list-header-filters.tsx @@ -4,6 +4,7 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li import { Flex, Group, Stack } from '@mantine/core'; import { openModal } from '@mantine/modals'; import { useQueryClient } from '@tanstack/react-query'; +import debounce from 'lodash/debounce'; import { RiSortAsc, RiSortDesc, @@ -334,6 +335,8 @@ export const AlbumListHeaderFilters = ({ } }; + const debouncedHandleItemSize = debounce(handleItemSize, 20); + const handleSetViewType = useCallback( (e: MouseEvent) => { if (!e.currentTarget?.value) return; @@ -570,9 +573,9 @@ export const AlbumListHeaderFilters = ({ : table.rowHeight } label={null} - max={100} - min={25} - onChangeEnd={handleItemSize} + max={400} + min={-25} + onChange={debouncedHandleItemSize} /> {(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && ( diff --git a/src/renderer/features/artists/components/album-artist-list-header-filters.tsx b/src/renderer/features/artists/components/album-artist-list-header-filters.tsx index 7beb7eec..1095af6f 100644 --- a/src/renderer/features/artists/components/album-artist-list-header-filters.tsx +++ b/src/renderer/features/artists/components/album-artist-list-header-filters.tsx @@ -3,6 +3,7 @@ import { IDatasource } from '@ag-grid-community/core'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import { Group, Stack, Flex } from '@mantine/core'; import { useQueryClient } from '@tanstack/react-query'; +import debounce from 'lodash/debounce'; import { RiSortAsc, RiSortDesc, @@ -99,6 +100,8 @@ export const AlbumArtistListHeaderFilters = ({ } }; + const debouncedHandleItemSize = debounce(handleItemSize, 20); + const fetch = useCallback( async (startIndex: number, limit: number, filters: AlbumArtistListFilter) => { const queryKey = queryKeys.albumArtists.list(server?.id || '', { @@ -436,9 +439,9 @@ export const AlbumArtistListHeaderFilters = ({ : table.rowHeight } label={null} - max={100} - min={25} - onChangeEnd={handleItemSize} + max={400} + min={-50} + onChange={debouncedHandleItemSize} /> {(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && ( diff --git a/src/renderer/store/list.store.ts b/src/renderer/store/list.store.ts index d1c96a27..71d7d196 100644 --- a/src/renderer/store/list.store.ts +++ b/src/renderer/store/list.store.ts @@ -264,7 +264,7 @@ export const useListStore = create()( sortBy: AlbumListSort.RECENTLY_ADDED, sortOrder: SortOrder.DESC, }, - grid: { scrollOffset: 0, size: 0 }, + grid: { scrollOffset: 0, size: 200 }, table: { autoFit: true, columns: [ @@ -305,7 +305,7 @@ export const useListStore = create()( sortBy: AlbumArtistListSort.NAME, sortOrder: SortOrder.DESC, }, - grid: { scrollOffset: 0, size: 0 }, + grid: { scrollOffset: 0, size: 200 }, table: { autoFit: true, columns: [