From ba52e70dbb12c4386afe33040a84e8b48767725b Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 12 Jan 2025 19:41:59 +0100
Subject: [PATCH] Improve "Updates" render performance

---
 .../core/components/virtuoso/StyledGroupItemWrapper.tsx  | 9 ++++++---
 src/modules/updates/components/ChapterUpdateCard.tsx     | 5 +++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx b/src/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx
index c3c92d6f..c6878361 100644
--- a/src/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx
+++ b/src/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx
@@ -8,7 +8,10 @@
 
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
+import { memo } from 'react';
 
-export const StyledGroupItemWrapper = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(0, 1, 1, 1),
-}));
+export const StyledGroupItemWrapper = memo(
+    styled(Box)(({ theme }) => ({
+        padding: theme.spacing(0, 1, 1, 1),
+    })),
+);
diff --git a/src/modules/updates/components/ChapterUpdateCard.tsx b/src/modules/updates/components/ChapterUpdateCard.tsx
index 92e94b47..4f61fae6 100644
--- a/src/modules/updates/components/ChapterUpdateCard.tsx
+++ b/src/modules/updates/components/ChapterUpdateCard.tsx
@@ -17,6 +17,7 @@ import IconButton from '@mui/material/IconButton';
 import { Link, useLocation } from 'react-router-dom';
 import Refresh from '@mui/icons-material/Refresh';
 import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { ChapterUpdateListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
@@ -28,7 +29,7 @@ import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { Chapters } from '@/modules/chapter/services/Chapters.ts';
 
-export const ChapterUpdateCard = ({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
+export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
     const { manga } = chapter;
     const download = Chapters.useDownloadStatusFromCache(chapter.id);
 
@@ -145,4 +146,4 @@ export const ChapterUpdateCard = ({ chapter }: { chapter: ChapterUpdateListField
             </CardActionArea>
         </Card>
     );
-};
+});