From b4664f45b4d1151e7f4023289c2cdf02d4201c16 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 9 Mar 2023 02:36:23 -0800
Subject: [PATCH] Adjust default grid sizing and handler

---
 .../albums/components/album-list-header-filters.tsx      | 9 ++++++---
 .../components/album-artist-list-header-filters.tsx      | 9 ++++++---
 src/renderer/store/list.store.ts                         | 4 ++--
 3 files changed, 14 insertions(+), 8 deletions(-)

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<HTMLButtonElement>) => {
       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}
               />
             </DropdownMenu.Item>
             {(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}
               />
             </DropdownMenu.Item>
             {(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<ListSlice>()(
               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<ListSlice>()(
               sortBy: AlbumArtistListSort.NAME,
               sortOrder: SortOrder.DESC,
             },
-            grid: { scrollOffset: 0, size: 0 },
+            grid: { scrollOffset: 0, size: 200 },
             table: {
               autoFit: true,
               columns: [