perf: window rewards list (#6090)

Author: bigint

apps/web/src/components/Settings/Rewards/List.tsx

@@ -8,6 +8,7 @@ import {
 import dayjs from "dayjs";
 import { useCallback } from "react";
 import { Link } from "react-router";
+import { WindowVirtualizer } from "virtua";
 import Loader from "@/components/Shared/Loader";
 import { EmptyState, ErrorMessage } from "@/components/Shared/UI";
 import useLoadMoreOnIntersect from "@/hooks/useLoadMoreOnIntersect";
@@ -60,29 +61,31 @@ const List = () => {
   }
 
   return (
-    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-700">
-      {tokenRewards.map((distribution) => (
-        <div
-          className="flex items-center justify-between p-5"
-          key={distribution.txHash}
-        >
-          <div className="flex items-center space-x-2">
-            <GiftIcon className="size-4 text-gray-500 dark:text-gray-200" />
-            <div>
-              Received <b>{Number(distribution.amount.value).toFixed(4)}</b>
+    <div className="virtual-divider-list-window">
+      <WindowVirtualizer>
+        {tokenRewards.map((distribution) => (
+          <div
+            className="flex items-center justify-between p-5"
+            key={distribution.txHash}
+          >
+            <div className="flex items-center space-x-2">
+              <GiftIcon className="size-4 text-gray-500 dark:text-gray-200" />
+              <div>
+                Received <b>{Number(distribution.amount.value).toFixed(4)}</b>
+              </div>
             </div>
+            <Link
+              className="text-gray-500 text-sm dark:text-gray-200"
+              rel="noreferrer noopener"
+              target="_blank"
+              to={`${BLOCK_EXPLORER_URL}/tx/${distribution.txHash}`}
+            >
+              {dayjs(distribution.timestamp).format("MMM D, YYYY h:mm A")}
+            </Link>
           </div>
-          <Link
-            className="text-gray-500 text-sm dark:text-gray-200"
-            rel="noreferrer noopener"
-            target="_blank"
-            to={`${BLOCK_EXPLORER_URL}/tx/${distribution.txHash}`}
-          >
-            {dayjs(distribution.timestamp).format("MMM D, YYYY h:mm A")}
-          </Link>
-        </div>
-      ))}
-      {hasMore && <span ref={loadMoreRef} />}
+        ))}
+        {hasMore && <span ref={loadMoreRef} />}
+      </WindowVirtualizer>
     </div>
   );
 };