From f0f45e007df8b6cf0ec757ae0ced6c9680b0d512 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Tue, 25 Jan 2022 02:08:10 +0800
Subject: [PATCH] feat: global proxies use virtual list

---
 src/pages/proxies.tsx | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/pages/proxies.tsx b/src/pages/proxies.tsx
index c5deb2e..767b360 100644
--- a/src/pages/proxies.tsx
+++ b/src/pages/proxies.tsx
@@ -1,5 +1,6 @@
 import useSWR, { useSWRConfig } from "swr";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Virtuoso } from "react-virtuoso";
 import { Button, ButtonGroup, List, Paper } from "@mui/material";
 import { getClashConfig, updateConfigs, updateProxy } from "../services/api";
 import { patchClashConfig } from "../services/cmds";
@@ -74,8 +75,15 @@ const ProxyPage = () => {
     setCurProxy(name);
   };
 
+  // difference style
+  const pageStyle = asGroup ? {} : { height: "100%" };
+  const paperStyle: any = asGroup
+    ? { mb: 0.5 }
+    : { py: 1, height: "100%", boxSizing: "border-box" };
+
   return (
     <BasePage
+      contentStyle={pageStyle}
       title={asGroup ? "Proxy Groups" : "Proxies"}
       header={
         <ButtonGroup size="small">
@@ -92,7 +100,7 @@ const ProxyPage = () => {
         </ButtonGroup>
       }
     >
-      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 1 }}>
+      <Paper sx={{ borderRadius: 1, boxShadow: 2, ...paperStyle }}>
         {asGroup ? (
           <List>
             {groups.map((group) => (
@@ -100,18 +108,19 @@ const ProxyPage = () => {
             ))}
           </List>
         ) : (
-          // todo: virtual list
-          <List>
-            {filterProxies.map((proxy) => (
+          // virtual list
+          <Virtuoso
+            style={{ height: "100%" }}
+            totalCount={filterProxies.length}
+            itemContent={(index) => (
               <ProxyItem
-                key={proxy.name}
-                proxy={proxy}
-                selected={proxy.name === curProxy}
+                proxy={filterProxies[index]}
+                selected={filterProxies[index].name === curProxy}
                 onClick={onChangeProxy}
                 sx={{ py: 0, px: 2 }}
               />
-            ))}
-          </List>
+            )}
+          />
         )}
       </Paper>
     </BasePage>