perf: Improve TorrentTile rendering performance (#1951)

src/widgets/torrent/TorrentTile.tsx

@@ -1,23 +1,22 @@
-import { type MRT_ColumnDef, MRT_Table, useMantineReactTable } from 'mantine-react-table';
 import {
   Badge,
   Center,
-  createStyles,
   Flex,
   Group,
   Loader,
   Popover,
   Progress,
-  ScrollArea,
   Stack,
   Text,
   Title,
+  createStyles,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { IconFileDownload } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { type MRT_ColumnDef, MRT_TableContainer, useMantineReactTable } from 'mantine-react-table';
 import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
 import { MIN_WIDTH_MOBILE } from '~/constants/constants';
@@ -109,7 +108,6 @@ function TorrentTile({ widget }: TorrentTileProps) {
 
   const filteredTorrents = filterTorrents(widget, torrents);
 
-
   const difference = new Date().getTime() - dataUpdatedAt;
   const duration = dayjs.duration(difference, 'ms');
   const humanizedDuration = duration.humanize();
@@ -117,7 +115,8 @@ function TorrentTile({ widget }: TorrentTileProps) {
   const ratioGlobal = getTorrentsRatio(widget, torrents, false);
   const ratioWithFilter = getTorrentsRatio(widget, torrents, true);
 
-  const columns = useMemo<MRT_ColumnDef<TorrentTotalDownload['torrents'][0]>[]>(() => [
+  const columns = useMemo<MRT_ColumnDef<TorrentTotalDownload['torrents'][0]>[]>(
+    () => [
       {
         id: 'dateAdded',
         accessorFn: (row) => new Date(row.dateAdded),
@@ -138,11 +137,7 @@ function TorrentTile({ widget }: TorrentTileProps) {
             }}
           >
             <Popover.Target>
-            <Text
-              maw={'30vw'}
-              size="xs"
-              lineClamp={1}
-            >
+              <Text maw={'30vw'} size="xs" lineClamp={1}>
                 {String(cell.getValue())}
               </Text>
             </Popover.Target>
@@ -188,19 +183,29 @@ function TorrentTile({ widget }: TorrentTileProps) {
         maxSize: 1,
         Cell: ({ cell, row }) => (
           <Flex>
-          <Text className={useStyles().classes.noTextBreak}>{(Number(cell.getValue()) * 100).toFixed(1)}%</Text>
+            <Text className={useStyles().classes.noTextBreak}>
+              {(Number(cell.getValue()) * 100).toFixed(1)}%
+            </Text>
             <Progress
               radius="lg"
               color={
-              Number(cell.getValue()) === 1 ? 'green' : row.original.state === 'paused' ? 'yellow' : 'blue'
+                Number(cell.getValue()) === 1
+                  ? 'green'
+                  : row.original.state === 'paused'
+                    ? 'yellow'
+                    : 'blue'
               }
               value={Number(cell.getValue()) * 100}
               size="lg"
-          />,
-        </Flex>),
+            />
+            ,
+          </Flex>
+        ),
         sortDescFirst: true,
       },
-  ], []);
+    ],
+    []
+  );
 
   const torrentsTable = useMantineReactTable({
     columns,
@@ -210,6 +215,9 @@ function TorrentTile({ widget }: TorrentTileProps) {
     enableMultiSort: true,
     enableColumnActions: false,
     enableColumnFilters: false,
+    enableRowVirtualization: true,
+    rowVirtualizerProps: { overscan: 20 },
+    mantineTableContainerProps: { sx: { scrollbarWidth: 'none' } },
     enableSorting: true,
     initialState: {
       showColumnFilters: false,
@@ -238,7 +246,6 @@ function TorrentTile({ widget }: TorrentTileProps) {
     },
   });
 
-
   if (isError) {
     return (
       <Stack>
@@ -288,10 +295,8 @@ function TorrentTile({ widget }: TorrentTileProps) {
   }
 
   return (
-    <Flex direction="column" sx={{ height: '100%' }} ref={ref}>
-      <ScrollArea style={{ flexGrow: 1 }}>
-        <MRT_Table table={torrentsTable} />
-      </ScrollArea>
+    <Flex direction="column" sx={{ height: '100%', isolation: 'isolate' }} ref={ref}>
+      <MRT_TableContainer table={torrentsTable} />
       <Group spacing="sm">
         {data.apps.some((x) => !x.success) && (
           <Badge variant="dot" color="red">
@@ -320,7 +325,7 @@ export const filterTorrents = (widget: ITorrent, torrents: TorrentTotalDownload[
       (torrent) =>
         !torrent.isCompleted ||
         (widget.properties.displayActiveTorrents &&
-          torrent.uploadSpeed > widget.properties.speedLimitOfActiveTorrents * 1024),
+          torrent.uploadSpeed > widget.properties.speedLimitOfActiveTorrents * 1024)
     );
   }
 
@@ -328,7 +333,7 @@ export const filterTorrents = (widget: ITorrent, torrents: TorrentTotalDownload[
     result = filterTorrentsByLabels(
       result,
       widget.properties.labelFilter,
-      widget.properties.labelFilterIsWhitelist,
+      widget.properties.labelFilterIsWhitelist
     );
   }
 
@@ -348,7 +353,7 @@ const filterStaleTorrent = (widget: ITorrent, torrents: TorrentTotalDownload['to
 const filterTorrentsByLabels = (
   torrents: TorrentTotalDownload['torrents'],
   labels: string[],
-  isWhitelist: boolean,
+  isWhitelist: boolean
 ) => {
   if (isWhitelist) {
     return torrents.filter((torrent) => torrent.label && labels.includes(torrent.label));
@@ -360,7 +365,7 @@ const filterTorrentsByLabels = (
 export const getTorrentsRatio = (
   widget: ITorrent,
   torrents: TorrentTotalDownload['torrents'],
-  applyAllFilter: boolean,
+  applyAllFilter: boolean
 ) => {
   if (applyAllFilter) {
     torrents = filterTorrents(widget, torrents);
@@ -368,18 +373,14 @@ export const getTorrentsRatio = (
     torrents = filterTorrentsByLabels(
       torrents,
       widget.properties.labelFilter,
-      widget.properties.labelFilterIsWhitelist,
+      widget.properties.labelFilterIsWhitelist
     );
   }
 
-  let totalDownloadedSum = torrents.reduce(
-    (sum, torrent) => sum + torrent.totalDownloaded,
-    0,
-  );
+  let totalDownloadedSum = torrents.reduce((sum, torrent) => sum + torrent.totalDownloaded, 0);
 
   return totalDownloadedSum > 0
-    ? torrents.reduce((sum, torrent) => sum + torrent.totalUploaded, 0) /
-    totalDownloadedSum
+    ? torrents.reduce((sum, torrent) => sum + torrent.totalUploaded, 0) / totalDownloadedSum
     : -1;
 };