ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve bulk migration render performance

Browse Source
This commit is contained in:
schroda
2026-05-13 01:22:04 +02:00
parent 72d213c43e
commit 06cc0724df
6 changed files with 377 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/features/migration/components/MIgrationEntryGroup.tsx
View File

@@ -11,58 +11,60 @@ import type { ButtonProps } from '@mui/material/Button';
import Button from '@mui/material/Button';
import Collapse from '@mui/material/Collapse';
import Stack from '@mui/material/Stack';
import {} from 'react';
import { memo } from 'react';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { MigrationEntry } from '@/features/migration/components/migration-entry/MigrationEntry.tsx';
import { MigrationManager } from '@/features/migration/MigrationManager.ts';
export const MigrationEntryGroup = ({
status,
title,
entries,
color,
isMigrating = false,
}: {
status: MigrationEntryStatus;
title: string;
entries: TMigrationEntry[];
color: ButtonProps['color'];
isMigrating?: boolean;
}) => {
const isExpanded = MigrationManager.useGroupExpandState(status);
export const MigrationEntryGroup = memo(
({
status,
title,
entries,
color,
isMigrating = false,
}: {
status: MigrationEntryStatus;
title: string;
entries: TMigrationEntry[];
color: ButtonProps['color'];
isMigrating?: boolean;
}) => {
const isExpanded = MigrationManager.useGroupExpandState(status);
if (!entries.length) {
return null;
}
if (!entries.length) {
return null;
}
return (
<Stack sx={{ width: '100%', gap: 2 }}>
<Button
onClick={() => MigrationManager.setGroupExpandState(status, !isExpanded)}
color={color}
variant="outlined"
startIcon={isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
size="large"
sx={{
py: 2,
justifyContent: 'center',
'& .MuiButton-startIcon': {
position: 'absolute',
left: (theme) => theme.spacing(4),
margin: 0,
},
}}
>
{title}
</Button>
<Collapse in={isExpanded} unmountOnExit>
<Stack sx={{ gap: 1 }}>
{entries.map((entry) => (
<MigrationEntry key={entry.mangaId} entry={entry} isMigrating={isMigrating} />
))}
</Stack>
</Collapse>
</Stack>
);
};
return (
<Stack sx={{ width: '100%', gap: 2 }}>
<Button
onClick={() => MigrationManager.setGroupExpandState(status, !isExpanded)}
color={color}
variant="outlined"
startIcon={isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
size="large"
sx={{
py: 2,
justifyContent: 'center',
'& .MuiButton-startIcon': {
position: 'absolute',
left: (theme) => theme.spacing(4),
margin: 0,
},
}}
>
{title}
</Button>
<Collapse in={isExpanded} unmountOnExit>
<Stack sx={{ gap: 1 }}>
{entries.map((entry) => (
<MigrationEntry key={entry.mangaId} entry={entry} isMigrating={isMigrating} />
))}
</Stack>
</Collapse>
</Stack>
);
},
);

5
src/features/migration/components/MigrationCard.tsx
View File

@@ -21,8 +21,9 @@ import { Sources } from '@/features/source/services/Sources';
import type { TMigratableSource } from '@/features/migration/Migration.types.ts';
import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
import { AppRoutes } from '@/base/AppRoute.constants.ts';
import { memo } from 'react';
export const MigrationCard = (source: TMigratableSource) => {
export const MigrationCard = memo((source: TMigratableSource) => {
const { id, name, lang, iconUrl, mangaCount } = source;
const { t } = useLingui();
@@ -66,4 +67,4 @@ export const MigrationCard = (source: TMigratableSource) => {
</CardActionArea>
</Card>
);
};
});

98
src/features/migration/components/MigrationSourceList.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useCallback, useMemo, useState } from 'react';
import { memo, useCallback, useMemo, useState } from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Chip from '@mui/material/Chip';
@@ -36,55 +36,57 @@ import { languageCodeToName } from '@/base/utils/Languages.ts';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/base/components/buttons/StyledFab.tsx';
import Stack from '@mui/material/Stack';
const SourceCard = ({
source,
onToggle,
isCurrentSource,
isSelected,
isDragging,
}: {
source: SourceItem;
onToggle: (id: SourceIdInfo['id']) => void;
isCurrentSource: boolean;
isSelected: boolean;
isDragging?: boolean;
}) => {
const { t } = useLingui();
const SourceCard = memo(
({
source,
onToggle,
isCurrentSource,
isSelected,
isDragging,
}: {
source: SourceItem;
onToggle: (id: SourceIdInfo['id']) => void;
isCurrentSource: boolean;
isSelected: boolean;
isDragging?: boolean;
}) => {
const { t } = useLingui();
return (
<StyledGroupItemWrapper>
<Card>
<CardActionArea onClick={() => onToggle(source.id)}>
<ListCardContent sx={{ justifyContent: 'space-between' }}>
<Stack sx={{ flexFlow: 'row', gap: 1, alignItems: 'center' }}>
<ListCardAvatar
iconUrl={requestManager.getValidImgUrlFor(source.iconUrl)}
alt={source.name}
slots={{ spinnerImageProps: { ignoreQueue: true } }}
/>
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography variant="h6" component="h3">
{source.name}
</Typography>
<Typography variant="caption">{languageCodeToName(source.lang)}</Typography>
</Box>
</Stack>
<Stack sx={{ flexDirection: 'row', gap: 4 }}>
{isCurrentSource && (
<Chip size="small" label={t`Current source`} color="primary" variant="outlined" />
)}
{isSelected && (
<Box>
<DragHandle sx={{ mr: 2, cursor: isDragging ? 'grabbing' : 'grab' }} />
return (
<StyledGroupItemWrapper>
<Card>
<CardActionArea onClick={() => onToggle(source.id)}>
<ListCardContent sx={{ justifyContent: 'space-between' }}>
<Stack sx={{ flexFlow: 'row', gap: 1, alignItems: 'center' }}>
<ListCardAvatar
iconUrl={requestManager.getValidImgUrlFor(source.iconUrl)}
alt={source.name}
slots={{ spinnerImageProps: { ignoreQueue: true } }}
/>
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography variant="h6" component="h3">
{source.name}
</Typography>
<Typography variant="caption">{languageCodeToName(source.lang)}</Typography>
</Box>
)}
</Stack>
</ListCardContent>
</CardActionArea>
</Card>
</StyledGroupItemWrapper>
);
};
</Stack>
<Stack sx={{ flexDirection: 'row', gap: 4 }}>
{isCurrentSource && (
<Chip size="small" label={t`Current source`} color="primary" variant="outlined" />
)}
{isSelected && (
<Box>
<DragHandle sx={{ mr: 2, cursor: isDragging ? 'grabbing' : 'grab' }} />
</Box>
)}
</Stack>
</ListCardContent>
</CardActionArea>
</Card>
</StyledGroupItemWrapper>
);
},
);
export const MigrationSourceList = ({
sources,

417
src/features/migration/components/migration-entry/MigrationEntry.tsx
View File

@@ -9,7 +9,7 @@
import type { MigrationMatch, TMigrationEntry } from '@/features/migration/Migration.types.ts';
import { MigrationManager } from '@/features/migration/MigrationManager.ts';
import Paper from '@mui/material/Paper';
import { useMemo } from 'react';
import { memo, useMemo } from 'react';
import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { MigrationSourceEntry } from '@/features/migration/components/migration-entry/MigrationSourceEntry.tsx';
@@ -28,214 +28,227 @@ import Divider from '@mui/material/Divider';
import { MigrationEntryStatusIndicator } from '@/features/migration/components/migration-entry/MigrationEntryStatusIndicator.tsx';
import Box from '@mui/material/Box';
const MigrationEntryMobile = ({
entry,
entry: { mangaId, mangaTitle, status, error, isExcluded },
destinationEntry,
otherSearchMatches,
isExpanded,
setIsExpanded,
isMigrating,
}: {
entry: TMigrationEntry;
destinationEntry: MigrationMatch | undefined;
otherSearchMatches: MigrationMatch[];
isExpanded: boolean;
setIsExpanded: (expanded: boolean) => void;
isMigrating: boolean;
}) => {
const { t } = useLingui();
const MigrationEntryMobile = memo(
({
entry,
entry: { mangaId, mangaTitle, status, error, isExcluded },
destinationEntry,
otherSearchMatches,
isExpanded,
setIsExpanded,
isMigrating,
}: {
entry: TMigrationEntry;
destinationEntry: MigrationMatch | undefined;
otherSearchMatches: MigrationMatch[];
isExpanded: boolean;
setIsExpanded: (expanded: boolean) => void;
isMigrating: boolean;
}) => {
const { t } = useLingui();
return (
<>
<MigrationSourceEntry {...entry} />
<MigrationDestinationEntry
sourceMangaId={mangaId}
sourceMangaTitle={mangaTitle}
entry={destinationEntry}
status={status}
otherResultsCount={otherSearchMatches.length}
isExpanded={isExpanded}
setIsExpanded={setIsExpanded}
isMigrating={isMigrating}
error={error}
/>
<Collapse in={isExpanded} unmountOnExit>
<Divider sx={{ mb: 1 }} />
<Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
<Typography variant="h6" component="h2">{t`Matches`}</Typography>
<Button
startIcon={<SearchIcon />}
variant="text"
onClick={() => {
ReactRouter.navigate(AppRoutes.migrate.childRoutes.manualSearch.path(mangaId, mangaTitle), {
state: { mangaTitle: mangaTitle },
});
}}
>{t`Manual search`}</Button>
</Stack>
<Stack sx={{ pt: 2 }}>
{otherSearchMatches.map((searchMatch) => {
if (destinationEntry?.id === searchMatch.id) {
return null;
}
return (
<MigrationMatchedEntry key={searchMatch.id} sourceMangaId={mangaId} entry={searchMatch} />
);
})}
</Stack>
</Collapse>
{!isMigrating && (
<MigrationEntrySearchExcludeActions
hasResults={!!destinationEntry}
return (
<>
<MigrationSourceEntry {...entry} />
<MigrationDestinationEntry
sourceMangaId={mangaId}
sourceMangaTitle={mangaTitle}
entry={destinationEntry}
status={status}
otherResultsCount={otherSearchMatches.length}
isExpanded={isExpanded}
setIsExpanded={setIsExpanded}
isExcluded={isExcluded}
mangaId={mangaId}
mangaTitle={mangaTitle}
isMigrating={isMigrating}
error={error}
/>
)}
</>
);
};
export const MigrationEntryDesktop = ({
entry,
entry: { mangaId, mangaTitle, status, error },
destinationEntry,
otherSearchMatches,
isExpanded,
setIsExpanded,
isMigrating,
}: {
entry: TMigrationEntry;
destinationEntry: MigrationMatch | undefined;
otherSearchMatches: MigrationMatch[];
isExpanded: boolean;
setIsExpanded: (expanded: boolean) => void;
isMigrating: boolean;
}) => {
const { t } = useLingui();
<Collapse in={isExpanded} unmountOnExit>
<Divider sx={{ mb: 1 }} />
<Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
<Typography variant="h6" component="h2">{t`Matches`}</Typography>
<Button
startIcon={<SearchIcon />}
variant="text"
onClick={() => {
ReactRouter.navigate(
AppRoutes.migrate.childRoutes.manualSearch.path(mangaId, mangaTitle),
{
state: { mangaTitle: mangaTitle },
},
);
}}
>{t`Manual search`}</Button>
</Stack>
<Stack sx={{ pt: 2 }}>
{otherSearchMatches.map((searchMatch) => {
if (destinationEntry?.id === searchMatch.id) {
return null;
}
return (
<>
<Box
return (
<MigrationMatchedEntry
key={searchMatch.id}
sourceMangaId={mangaId}
entry={searchMatch}
/>
);
})}
</Stack>
</Collapse>
{!isMigrating && (
<MigrationEntrySearchExcludeActions
hasResults={!!destinationEntry}
otherResultsCount={otherSearchMatches.length}
isExpanded={isExpanded}
setIsExpanded={setIsExpanded}
isExcluded={isExcluded}
mangaId={mangaId}
mangaTitle={mangaTitle}
/>
)}
</>
);
},
);
export const MigrationEntryDesktop = memo(
({
entry,
entry: { mangaId, mangaTitle, status, error },
destinationEntry,
otherSearchMatches,
isExpanded,
setIsExpanded,
isMigrating,
}: {
entry: TMigrationEntry;
destinationEntry: MigrationMatch | undefined;
otherSearchMatches: MigrationMatch[];
isExpanded: boolean;
setIsExpanded: (expanded: boolean) => void;
isMigrating: boolean;
}) => {
const { t } = useLingui();
return (
<>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<MigrationSourceEntry {...entry} />
<Box sx={{ display: 'flex', alignItems: 'stretch', gap: 2 }}>
<Box sx={{ display: 'flex', gap: 4, alignItems: 'center' }}>
<MigrationEntryStatusIndicator status={status} hasResults={!!destinationEntry} />
<MigrationDestinationEntry
sourceMangaId={mangaId}
sourceMangaTitle={mangaTitle}
entry={destinationEntry}
status={status}
otherResultsCount={otherSearchMatches.length}
isExpanded={isExpanded}
setIsExpanded={setIsExpanded}
isMigrating={isMigrating}
error={error}
/>
</Box>
{!isMigrating && (
<MigrationEntrySearchExcludeActions
hasResults={!!destinationEntry}
otherResultsCount={otherSearchMatches.length}
isExpanded={isExpanded}
setIsExpanded={setIsExpanded}
isExcluded={entry.isExcluded}
mangaId={entry.mangaId}
mangaTitle={entry.mangaTitle}
/>
)}
</Box>
</Box>
<Collapse in={isExpanded && !isMigrating} unmountOnExit>
<Divider sx={{ my: 4 }} />
<Typography variant="h6" component="h2">{t`Matches`}</Typography>
<Stack sx={{ pt: 2 }}>
{otherSearchMatches.map((searchMatch) => {
if (destinationEntry?.id === searchMatch.id) {
return null;
}
return (
<MigrationMatchedEntry
key={searchMatch.id}
sourceMangaId={entry.mangaId}
entry={searchMatch}
/>
);
})}
</Stack>
</Collapse>
</>
);
},
);
export const MigrationEntry = memo(
({ entry: propEntry, isMigrating }: { entry: TMigrationEntry; isMigrating: boolean }) => {
const isTabletWidth = MediaQuery.useIsTabletWidth();
const entry = useMemo(() => MigrationManager.getUpToDateMigrationEntry(propEntry), [propEntry]);
const destinationEntry = useMemo(() => {
const match = entry.searchMatches.find((matchEntry) => matchEntry.id === entry.selectedMatchMangaId);
const manualMatch = entry.manualMatches.find((matchEntry) => matchEntry.id === entry.selectedMatchMangaId);
return match ?? manualMatch;
}, [entry.searchMatches, entry.selectedMatchMangaId]);
const otherMatches = useMemo(
() =>
entry.searchMatches
.filter((searchMatch) => searchMatch.id !== entry.selectedMatchMangaId)
.sort((a, b) => (b.latestChapterNumber ?? 0) - (a.latestChapterNumber ?? 0)),
[entry.searchMatches, entry.selectedMatchMangaId],
);
const MigrationComponent = useMemo(
() => (isTabletWidth ? MigrationEntryMobile : MigrationEntryDesktop),
[isTabletWidth],
);
return (
<Paper
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
opacity: !isMigrating && entry.isExcluded ? 0.5 : 1,
...applyStyles(isTabletWidth, {
flexDirection: 'column',
display: 'flex',
p: 2,
gap: 2,
}),
...applyStyles(!isTabletWidth, {
px: 2,
py: 2,
pr: 6,
}),
}}
>
<MigrationSourceEntry {...entry} />
<Box sx={{ display: 'flex', alignItems: 'stretch', gap: 2 }}>
<Box sx={{ display: 'flex', gap: 4, alignItems: 'center' }}>
<MigrationEntryStatusIndicator status={status} hasResults={!!destinationEntry} />
<MigrationDestinationEntry
sourceMangaId={mangaId}
sourceMangaTitle={mangaTitle}
entry={destinationEntry}
status={status}
otherResultsCount={otherSearchMatches.length}
isExpanded={isExpanded}
setIsExpanded={setIsExpanded}
isMigrating={isMigrating}
error={error}
/>
</Box>
{!isMigrating && (
<MigrationEntrySearchExcludeActions
hasResults={!!destinationEntry}
otherResultsCount={otherSearchMatches.length}
isExpanded={isExpanded}
setIsExpanded={setIsExpanded}
isExcluded={entry.isExcluded}
mangaId={entry.mangaId}
mangaTitle={entry.mangaTitle}
/>
)}
</Box>
</Box>
<Collapse in={isExpanded && !isMigrating} unmountOnExit>
<Divider sx={{ my: 4 }} />
<Typography variant="h6" component="h2">{t`Matches`}</Typography>
<Stack sx={{ pt: 2 }}>
{otherSearchMatches.map((searchMatch) => {
if (destinationEntry?.id === searchMatch.id) {
return null;
}
return (
<MigrationMatchedEntry
key={searchMatch.id}
sourceMangaId={entry.mangaId}
entry={searchMatch}
/>
);
})}
</Stack>
</Collapse>
</>
);
};
export const MigrationEntry = ({ entry: propEntry, isMigrating }: { entry: TMigrationEntry; isMigrating: boolean }) => {
const isTabletWidth = MediaQuery.useIsTabletWidth();
const entry = useMemo(() => MigrationManager.getUpToDateMigrationEntry(propEntry), [propEntry]);
const destinationEntry = useMemo(() => {
const match = entry.searchMatches.find((matchEntry) => matchEntry.id === entry.selectedMatchMangaId);
const manualMatch = entry.manualMatches.find((matchEntry) => matchEntry.id === entry.selectedMatchMangaId);
return match ?? manualMatch;
}, [entry.searchMatches, entry.selectedMatchMangaId]);
const otherMatches = useMemo(
() =>
entry.searchMatches
.filter((searchMatch) => searchMatch.id !== entry.selectedMatchMangaId)
.sort((a, b) => (b.latestChapterNumber ?? 0) - (a.latestChapterNumber ?? 0)),
[entry.searchMatches, entry.selectedMatchMangaId],
);
const MigrationComponent = useMemo(
() => (isTabletWidth ? MigrationEntryMobile : MigrationEntryDesktop),
[isTabletWidth],
);
return (
<Paper
sx={{
opacity: !isMigrating && entry.isExcluded ? 0.5 : 1,
...applyStyles(isTabletWidth, {
flexDirection: 'column',
display: 'flex',
p: 2,
gap: 2,
}),
...applyStyles(!isTabletWidth, {
px: 2,
py: 2,
pr: 6,
}),
}}
>
<MigrationComponent
entry={entry}
destinationEntry={destinationEntry}
isExpanded={entry.areMatchesExpanded}
setIsExpanded={() =>
MigrationManager.setEntryMatchesExpandState(entry.mangaId, !entry.areMatchesExpanded)
}
otherSearchMatches={otherMatches}
isMigrating={isMigrating}
/>
</Paper>
);
};
<MigrationComponent
entry={entry}
destinationEntry={destinationEntry}
isExpanded={entry.areMatchesExpanded}
setIsExpanded={() =>
MigrationManager.setEntryMatchesExpandState(entry.mangaId, !entry.areMatchesExpanded)
}
otherSearchMatches={otherMatches}
isMigrating={isMigrating}
/>
</Paper>
);
},
);

114
src/features/migration/components/migration-entry/MigrationMatchedEntry.tsx
View File

@@ -24,69 +24,67 @@ import Button from '@mui/material/Button';
import CardActionArea from '@mui/material/CardActionArea';
import Link from '@mui/material/Link';
import { Link as RouterLink } from 'react-router-dom';
import { memo } from 'react';
export const MigrationMatchedEntry = ({
sourceMangaId,
entry,
}: {
sourceMangaId: MangaIdInfo['id'];
entry: MigrationMatch;
}) => {
const { t } = useLingui();
export const MigrationMatchedEntry = memo(
({ sourceMangaId, entry }: { sourceMangaId: MangaIdInfo['id']; entry: MigrationMatch }) => {
const { t } = useLingui();
return (
<MigrationEntryCard sx={{ mb: 1 }}>
<CardActionArea onClick={() => MigrationManager.selectMatch(sourceMangaId, entry.id, entry.sourceId)}>
<MigrationEntryCardContent>
{(() => (
<>
<Link
component={RouterLink}
to={AppRoutes.manga.path(entry.id)}
onClick={(e) => e.stopPropagation()}
>
<ListCardAvatar
iconUrl={Mangas.getThumbnailUrl(entry)}
alt={entry.title}
slots={{
avatarProps: {
sx: {
width: 'unset',
height: 80,
aspectRatio: '3 / 4',
},
},
}}
/>
</Link>
<Stack sx={{ minWidth: 0, flex: 1 }}>
<Typography variant="overline" color="textSecondary">
{entry.sourceTitle}
</Typography>
return (
<MigrationEntryCard sx={{ mb: 1 }}>
<CardActionArea onClick={() => MigrationManager.selectMatch(sourceMangaId, entry.id, entry.sourceId)}>
<MigrationEntryCardContent>
{(() => (
<>
<Link
component={RouterLink}
to={AppRoutes.manga.path(entry.id)}
sx={{ textDecoration: 'none', color: 'inherit', width: 'max-content' }}
onClick={(e) => e.stopPropagation()}
>
<TypographyMaxLines variant="h6" component="h3" title={entry.title}>
{entry.title}
</TypographyMaxLines>
<ListCardAvatar
iconUrl={Mangas.getThumbnailUrl(entry)}
alt={entry.title}
slots={{
avatarProps: {
sx: {
width: 'unset',
height: 80,
aspectRatio: '3 / 4',
},
},
}}
/>
</Link>
<MigrationEntryMetadataText {...entry} />
</Stack>
</>
))()}
{(() => (
<Button
variant="outlined"
{...MUIUtil.preventRippleProp({
onClick: () => MigrationManager.selectMatch(sourceMangaId, entry.id, entry.sourceId),
})}
>{t`Select`}</Button>
))()}
</MigrationEntryCardContent>
</CardActionArea>
</MigrationEntryCard>
);
};
<Stack sx={{ minWidth: 0, flex: 1 }}>
<Typography variant="overline" color="textSecondary">
{entry.sourceTitle}
</Typography>
<Link
component={RouterLink}
to={AppRoutes.manga.path(entry.id)}
sx={{ textDecoration: 'none', color: 'inherit', width: 'max-content' }}
onClick={(e) => e.stopPropagation()}
>
<TypographyMaxLines variant="h6" component="h3" title={entry.title}>
{entry.title}
</TypographyMaxLines>
</Link>
<MigrationEntryMetadataText {...entry} />
</Stack>
</>
))()}
{(() => (
<Button
variant="outlined"
{...MUIUtil.preventRippleProp({
onClick: () =>
MigrationManager.selectMatch(sourceMangaId, entry.id, entry.sourceId),
})}
>{t`Select`}</Button>
))()}
</MigrationEntryCardContent>
</CardActionArea>
</MigrationEntryCard>
);
},
);

5
src/features/migration/components/migration-entry/MigrationSourceEntry.tsx
View File

@@ -20,8 +20,9 @@ import { useLingui } from '@lingui/react/macro';
import Stack from '@mui/material/Stack';
import Link from '@mui/material/Link';
import { Link as RouterLink } from 'react-router-dom';
import { memo } from 'react';
export const MigrationSourceEntry = (entry: TMigrationEntry) => {
export const MigrationSourceEntry = memo((entry: TMigrationEntry) => {
const {
mangaId,
mangaThumbnailUrl,
@@ -94,4 +95,4 @@ export const MigrationSourceEntry = (entry: TMigrationEntry) => {
</Stack>
</Box>
);
};
});