refactor(gallery): optimize MasonryPhotoItem component with memoization

- Wrapped the MasonryPhotoItem component in React.memo to improve performance by preventing unnecessary re-renders.
- Removed the unused index prop from the component's parameters for cleaner code.

Signed-off-by: Innei <tukon479@gmail.com>

apps/web/src/modules/gallery/MasonryPhotoItem.tsx

@@ -1,7 +1,7 @@
 import { Thumbhash } from '@afilmory/ui'
 import clsx from 'clsx'
 import { m } from 'motion/react'
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { Fragment, memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useContextPhotos, usePhotoViewer } from '~/hooks/usePhotoViewer'
@@ -15,7 +15,7 @@ import { isMobileDevice } from '~/lib/device-viewport'
 import { ImageLoaderManager } from '~/lib/image-loader-manager'
 import type { PhotoManifest } from '~/types/photo'
 
-export const MasonryPhotoItem = ({ data, width, index: _ }: { data: PhotoManifest; width: number; index: number }) => {
+export const MasonryPhotoItem = memo(({ data, width }: { data: PhotoManifest; width: number }) => {
   const photos = useContextPhotos()
   const photoViewer = usePhotoViewer()
   const { t } = useTranslation()
@@ -369,4 +369,4 @@ export const MasonryPhotoItem = ({ data, width, index: _ }: { data: PhotoManifes
       )}
     </m.div>
   )
-}
+})

apps/web/src/modules/gallery/MasonryRoot.tsx

@@ -250,7 +250,7 @@ export const MasonryItem = memo(
           animate="visible"
           onAnimationComplete={shouldAnimate ? onAnimationComplete : undefined}
         >
-          <MasonryPhotoItem data={data as PhotoManifest} width={width} index={index} />
+          <MasonryPhotoItem data={data as PhotoManifest} width={width} />
         </m.div>
       )
     }