add layout animation for artist album cards

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -1,4 +1,5 @@
 import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { LayoutGroup, motion } from 'motion/react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createSearchParams, generatePath, Link, useParams } from 'react-router';
@@ -796,6 +797,15 @@ const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps)
             <Grid columns={24} gutter="md" type="container">
                 {displayedAlbums.map((album) => (
                     <Grid.Col key={album.id} span={span}>
+                        <motion.div
+                            layout
+                            layoutId={album.id}
+                            transition={{
+                                duration: 0.5,
+                                ease: 'easeInOut',
+                                layout: { duration: 0.5, ease: 'easeInOut' },
+                            }}
+                        >
                             <MemoizedItemCard
                                 controls={controls}
                                 data={album}
@@ -805,6 +815,7 @@ const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps)
                                 type="poster"
                                 withControls
                             />
+                        </motion.div>
                     </Grid.Col>
                 ))}
             </Grid>
@@ -1017,8 +1028,9 @@ const ArtistAlbums = () => {
                 />
             </Group>
             <div className={styles.albumSectionContainer} ref={cq.ref}>
-                {cq.isCalculated &&
+                {cq.isCalculated && (
-                    releaseTypeEntries.map(({ albums, displayName, releaseType }) => (
+                    <LayoutGroup>
+                        {releaseTypeEntries.map(({ albums, displayName, releaseType }) => (
                             <AlbumSection
                                 albums={albums}
                                 controls={controls}
@@ -1028,6 +1040,8 @@ const ArtistAlbums = () => {
                                 title={displayName}
                             />
                         ))}
+                    </LayoutGroup>
+                )}
             </div>
         </Stack>
     );