add motion animation on list to handle scrollbar sizing shift

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>
     );
 };
 

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>
     );
 };