From 74384639de3ec54f36df5561dfc21c43a136bf28 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 21 Jul 2023 18:00:51 -0700
Subject: [PATCH] Add memoized version of grid carousel

---
 src/renderer/components/grid-carousel/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/grid-carousel/index.tsx b/src/renderer/components/grid-carousel/index.tsx
index 32935f54..f111acf7 100644
--- a/src/renderer/components/grid-carousel/index.tsx
+++ b/src/renderer/components/grid-carousel/index.tsx
@@ -1,4 +1,4 @@
-import { isValidElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { isValidElement, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { Group, Stack } from '@mantine/core';
 import throttle from 'lodash/throttle';
 import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
@@ -79,7 +79,7 @@ const Title = ({ label, handleNext, handlePrev, pagination }: TitleProps) => {
     );
 };
 
-interface SwiperGridCarouselProps {
+export interface SwiperGridCarouselProps {
     cardRows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
     data: Album[] | AlbumArtist[] | Artist[] | RelatedArtist[] | undefined;
     isLoading?: boolean;
@@ -281,3 +281,14 @@ export const SwiperGridCarousel = ({
         </CarouselContainer>
     );
 };
+
+export const MemoizedSwiperGridCarousel = memo(
+    function Carousel(props: SwiperGridCarouselProps) {
+        return <SwiperGridCarousel {...props} />;
+    },
+    (oldProps, newProps) => {
+        const uniqueIdIsEqual = oldProps.uniqueId === newProps.uniqueId;
+        const dataIsEqual = oldProps.data === newProps.data;
+        return uniqueIdIsEqual && dataIsEqual;
+    },
+);