feat: infinite scroll for rules

package.json

@@ -40,6 +40,7 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "solid-apexcharts": "^0.3.2",
+    "solid-infinite-scroll": "^1.0.1",
     "solid-js": "^1.7.11",
     "sort-package-json": "^2.5.1",
     "tailwind-merge": "^1.14.0",

pnpm-lock.yaml

@@ -92,6 +92,9 @@ dependencies:
   solid-apexcharts:
     specifier: ^0.3.2
     version: 0.3.2(apexcharts@3.42.0)(solid-js@1.7.11)
+  solid-infinite-scroll:
+    specifier: ^1.0.1
+    version: 1.0.1
   solid-js:
     specifier: ^1.7.11
     version: 1.7.11
@@ -4040,6 +4043,15 @@ packages:
       solid-js: 1.7.11
     dev: false
 
+  /solid-infinite-scroll@1.0.1:
+    resolution:
+      {
+        integrity: sha512-yIDyr61316jyHSxuQqidMUTcauKDQyPIzIAKawTrTadqxij2wOcM3ei6/MR6WPBCcR0ZMJ8E0aQInFSnL9w2Hg==,
+      }
+    dependencies:
+      solid-js: 1.7.11
+    dev: false
+
   /solid-js@1.7.11:
     resolution:
       {

src/pages/Proxies.tsx

@@ -1,5 +1,5 @@
 import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
-import { For, createSignal, onMount } from 'solid-js'
+import { For, Show, createSignal, onMount } from 'solid-js'
 import Collapse from '~/components/Collpase'
 import ProxyNodeCard from '~/components/ProxyNodeCard'
 import { useProxies } from '~/signals/proxies'
@@ -115,7 +115,7 @@ export default () => {
         </div>
       </div>
 
-      <div>
+      <Show when={proxyProviders().length > 0}>
         <h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
 
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -174,7 +174,7 @@ export default () => {
             }}
           </For>
         </div>
-      </div>
+      </Show>
     </div>
   )
 }

src/pages/Rules.tsx

@@ -1,11 +1,14 @@
-import { For, createSignal, onMount } from 'solid-js'
+import InfiniteScroll from 'solid-infinite-scroll'
+import { For, createMemo, createSignal, onMount } from 'solid-js'
 import { useRequest } from '~/signals'
 import type { Rule, RuleProvider } from '~/types'
 
 export default () => {
   const request = useRequest()
+  const [maxRuleRender, setMaxRuleRender] = createSignal(100)
   const [rules, setRules] = createSignal<Rule[]>([])
   const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])
+  const renderRules = createMemo(() => rules().slice(0, maxRuleRender()))
 
   onMount(async () => {
     const { rules } = await request
@@ -27,7 +30,11 @@ export default () => {
         <h1 class="pb-4 text-lg font-semibold">Rules</h1>
 
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
-          <For each={rules()}>
+          <InfiniteScroll
+            each={renderRules()}
+            hasMore={renderRules().length < rules().length}
+            next={() => setMaxRuleRender(maxRuleRender() + 100)}
+          >
             {(rule) => (
               <div class="card card-bordered card-compact bg-base-200 p-4">
                 <div class="break-all">{rule.payload}</div>
@@ -36,7 +43,7 @@ export default () => {
                 </div>
               </div>
             )}
-          </For>
+          </InfiniteScroll>
         </div>
       </div>
 

src/signals/proxies.ts

@@ -32,7 +32,7 @@ export function useProxies() {
 
     Object.values(proxies).forEach((proxy) => {
       setProxyNodeMap({ ...proxyNodeMap(), [proxy.name]: proxy })
-      delay[proxy.name] = proxy.history[proxy.history.length - 1]?.delay
+      delay[proxy.name] = proxy.history.at(-1)?.delay ?? 0
     })
 
     setDelayMap(delay)