feat: infinite scroll for proxy card

src/components/ProxyCardGroups.tsx

@@ -0,0 +1,20 @@
+import InfiniteScroll from 'solid-infinite-scroll'
+import { createMemo, createSignal } from 'solid-js'
+import ProxyNodeCard from './ProxyNodeCard'
+
+export default (props: { proxies: string[]; now?: string }) => {
+  const [maxRender, setMaxRender] = createSignal(30)
+  const proxies = createMemo(() => props.proxies.slice(0, maxRender()))
+
+  return (
+    <InfiniteScroll
+      each={proxies()}
+      hasMore={proxies().length < props.proxies.length}
+      next={() => setMaxRender(maxRender() + 30)}
+    >
+      {(proxy) => (
+        <ProxyNodeCard proxyName={proxy} isSelected={props.now === proxy} />
+      )}
+    </InfiniteScroll>
+  )
+}

src/pages/Proxies.tsx

@@ -1,7 +1,7 @@
 import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import Collapse from '~/components/Collpase'
-import ProxyNodeCard from '~/components/ProxyNodeCard'
+import ProxyCardGroups from '~/components/ProxyCardGroups'
 import ProxyNodeDots from '~/components/ProxyNodeDots'
 import SubscriptionInfo from '~/components/SubscriptionInfo'
 import { useProxies } from '~/signals/proxies'
@@ -90,15 +90,7 @@ export default () => {
               )
 
               const content = (
-                <For each={proxy.all}>
+                <ProxyCardGroups proxies={proxy.all!} now={proxy.now} />
-                  {(proxyName) => (
-                    <ProxyNodeCard
-                      proxyName={proxyName}
-                      isSelected={proxy.now === proxyName}
-                      onClick={() => onProxyNodeClick(proxy, proxyName)}
-                    />
-                  )}
-                </For>
               )
 
               return (
@@ -169,9 +161,9 @@ export default () => {
                 </>
               )
               const content = (
-                <For each={proxyProvider.proxies}>
+                <ProxyCardGroups
-                  {(proxy) => <ProxyNodeCard proxyName={proxy.name} />}
+                  proxies={proxyProvider.proxies.map((i) => i.name)}
-                </For>
+                />
               )
 
               return (