Use global state for grid card views

- Prevent re-render when fetching already cached state

src/renderer/store/album-artist-list-data.store.ts

@@ -0,0 +1,37 @@
+import create from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+export interface AlbumArtistListDataState {
+  itemData: any[];
+}
+
+export interface AlbumArtistListDataSlice extends AlbumArtistListDataState {
+  actions: {
+    setItemData: (data: any[]) => void;
+  };
+}
+
+export const useAlbumArtistListDataStore = create<AlbumArtistListDataSlice>()(
+  devtools(
+    immer((set) => ({
+      actions: {
+        setItemData: (data) => {
+          set((state) => {
+            state.itemData = data;
+          });
+        },
+      },
+      itemData: [],
+    })),
+    { name: 'store_album_list_data' },
+  ),
+);
+
+export const useAlbumArtistListStoreActions = () =>
+  useAlbumArtistListDataStore((state) => state.actions);
+
+export const useAlbumArtistListItemData = () =>
+  useAlbumArtistListDataStore((state) => {
+    return { itemData: state.itemData, setItemData: state.actions.setItemData };
+  });

src/renderer/store/album-list-data.store.ts

@@ -0,0 +1,36 @@
+import create from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+export interface AlbumListDataState {
+  itemData: any[];
+}
+
+export interface AlbumListDataSlice extends AlbumListDataState {
+  actions: {
+    setItemData: (data: any[]) => void;
+  };
+}
+
+export const useAlbumListDataStore = create<AlbumListDataSlice>()(
+  devtools(
+    immer((set) => ({
+      actions: {
+        setItemData: (data) => {
+          set((state) => {
+            state.itemData = data;
+          });
+        },
+      },
+      itemData: [],
+    })),
+    { name: 'store_album_list_data' },
+  ),
+);
+
+export const useAlbumListStoreActions = () => useAlbumListDataStore((state) => state.actions);
+
+export const useAlbumListItemData = () =>
+  useAlbumListDataStore((state) => {
+    return { itemData: state.itemData, setItemData: state.actions.setItemData };
+  });

src/renderer/store/index.ts

@@ -5,3 +5,5 @@ export * from './album.store';
 export * from './song.store';
 export * from './album-artist.store';
 export * from './playlist.store';
+export * from './album-list-data.store';
+export * from './album-artist-list-data.store';