From 948fc40b3edc94617caad1e39fcd913073b37502 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 20 Nov 2025 12:36:38 -0800
Subject: [PATCH] add motion animation on list to handle scrollbar sizing shift

---
 .../item-list/item-grid-list/item-grid-list.tsx          | 9 ++++++---
 .../item-list/item-table-list/item-table-list.tsx        | 9 ++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
index d65cd968d..3c0d2aea6 100644
--- a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
+++ b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
-import { AnimatePresence } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import React, {
     CSSProperties,
@@ -41,6 +41,7 @@ import {
     useItemListState,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls, ItemListHandle } from '/@/renderer/components/item-list/types';
+import { animationProps } from '/@/shared/components/animations/animation-props';
 import { useElementSize } from '/@/shared/hooks/use-element-size';
 import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem } from '/@/shared/types/domain-types';
@@ -618,13 +619,15 @@ export const ItemGridList = ({
     useImperativeHandle(ref, () => imperativeHandle, [imperativeHandle]);
 
     return (
-        <div
+        <motion.div
             className={styles.itemGridContainer}
             data-overlayscrollbars-initialize=""
             onKeyDown={handleKeyDown}
             onMouseDown={(e) => (e.currentTarget as HTMLDivElement).focus()}
             ref={mergedContainerRef}
             tabIndex={0}
+            {...animationProps.fadeIn}
+            transition={{ duration: 1, ease: 'anticipate' }}
         >
             <AutoSizer>
                 {({ height, width }) => (
@@ -657,7 +660,7 @@ export const ItemGridList = ({
                     </ExpandedListContainer>
                 )}
             </AnimatePresence>
-        </div>
+        </motion.div>
     );
 };
 
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list.tsx b/src/renderer/components/item-list/item-table-list/item-table-list.tsx
index 12de595d4..c2bb87446 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list.tsx
+++ b/src/renderer/components/item-list/item-table-list/item-table-list.tsx
@@ -2,7 +2,7 @@
 
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import clsx from 'clsx';
-import { AnimatePresence } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import React, {
     type JSXElementConstructor,
@@ -38,6 +38,7 @@ import {
     ItemTableListColumnConfig,
 } from '/@/renderer/components/item-list/types';
 import { PlayerContext, usePlayer } from '/@/renderer/features/player/context/player-context';
+import { animationProps } from '/@/shared/components/animations/animation-props';
 import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { TableColumn } from '/@/shared/types/types';
@@ -2047,7 +2048,7 @@ export const ItemTableList = ({
     ]);
 
     return (
-        <div
+        <motion.div
             className={styles.itemTableListContainer}
             onKeyDown={handleKeyDown}
             onMouseDown={(e) => {
@@ -2059,6 +2060,8 @@ export const ItemTableList = ({
             }}
             ref={containerFocusRef}
             tabIndex={0}
+            {...animationProps.fadeIn}
+            transition={{ duration: 1, ease: 'anticipate' }}
         >
             {StickyHeader}
             {StickyGroupRow}
@@ -2110,6 +2113,6 @@ export const ItemTableList = ({
                     </ExpandedListContainer>
                 )}
             </AnimatePresence>
-        </div>
+        </motion.div>
     );
 };