refactor: update proxies and btn click animate

src/helpers/proxies.ts

@@ -5,14 +5,21 @@ export const formatTimeFromNow = (time: number | string) => {
   return dayjs(time).fromNow()
 }
 
-export const getBtnElFromClickEvent = (event: MouseEvent) => {
+export const handlerBtnClickWithAnimate = async (
+  event: MouseEvent,
+  cb: () => void,
+  className = 'animate-spin',
+) => {
   let el = event.target as HTMLElement
+  event.stopPropagation()
 
   while (el && !el.classList.contains('btn')) {
     el = el.parentElement!
   }
 
-  return el
+  el.classList.add(className)
+  await cb()
+  el.classList.remove(className)
 }
 
 export const formatProxyType = (type = '') => {

src/pages/Proxies.tsx

@@ -8,7 +8,10 @@ import {
   ProxyCardGroups,
   ProxyNodePreview,
 } from '~/components'
-import { getBtnElFromClickEvent, sortProxiesByOrderingType } from '~/helpers'
+import {
+  handlerBtnClickWithAnimate,
+  sortProxiesByOrderingType,
+} from '~/helpers'
 import { proxiesOrderingType, useProxies } from '~/signals'
 import type { Proxy } from '~/types'
 
@@ -29,13 +32,12 @@ export default () => {
     void setProxyGroupByProxyName(proxy, proxyName)
   }
 
-  const onSpeedTestClick = async (e: MouseEvent, name: string) => {
+  const onSpeedTestClick = (e: MouseEvent, name: string) => {
-    const el = getBtnElFromClickEvent(e)
+    handlerBtnClickWithAnimate(
-
+      e,
-    el.classList.add('animate-pulse')
+      latencyTestByProxyGroupName.bind(null, name),
-    e.stopPropagation()
+      'animate-pulse',
-    await latencyTestByProxyGroupName(name)
+    )
-    el.classList.remove('animate-pulse')
   }
 
   return (

src/pages/ProxyProvider.tsx

@@ -11,7 +11,7 @@ import {
 } from '~/components'
 import {
   formatTimeFromNow,
-  getBtnElFromClickEvent,
+  handlerBtnClickWithAnimate,
   sortProxiesByOrderingType,
 } from '~/helpers'
 import { proxiesOrderingType, useProxies } from '~/signals'
@@ -30,31 +30,20 @@ export default () => {
     {},
   )
 
-  const onHealthCheckClick = async (e: MouseEvent, name: string) => {
+  const onHealthCheckClick = (e: MouseEvent, name: string) => {
-    const el = getBtnElFromClickEvent(e)
+    handlerBtnClickWithAnimate(
-
+      e,
-    el.classList.add('animate-pulse')
+      healthCheckByProviderName.bind(null, name),
-    e.stopPropagation()
+      'animate-pulse',
-    await healthCheckByProviderName(name)
+    )
-    el.classList.remove('animate-pulse')
   }
 
-  const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
+  const onUpdateProviderClick = (e: MouseEvent, name: string) => {
-    const el = getBtnElFromClickEvent(e)
+    handlerBtnClickWithAnimate(e, updateProviderByProviderName.bind(null, name))
-
-    el.classList.add('animate-spin')
-    e.stopPropagation()
-    await updateProviderByProviderName(name)
-    el.classList.remove('animate-spin')
   }
 
-  const onUpdateAllProviderClick = async (e: MouseEvent) => {
+  const onUpdateAllProviderClick = (e: MouseEvent) => {
-    const el = getBtnElFromClickEvent(e)
+    handlerBtnClickWithAnimate(e, updateAllProvider)
-
-    el.classList.add('animate-spin')
-    e.stopPropagation()
-    await updateAllProvider()
-    el.classList.remove('animate-spin')
   }
 
   return (

src/pages/Rules.tsx

@@ -3,7 +3,7 @@ import { IconReload } from '@tabler/icons-solidjs'
 import InfiniteScroll from 'solid-infinite-scroll'
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
 import { Button } from '~/components'
-import { formatTimeFromNow, getBtnElFromClickEvent } from '~/helpers'
+import { formatTimeFromNow, handlerBtnClickWithAnimate } from '~/helpers'
 import { useRules } from '~/signals'
 
 export default () => {
@@ -20,22 +20,12 @@ export default () => {
 
   onMount(updateRules)
 
-  const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
+  const onUpdateProviderClick = (e: MouseEvent, name: string) => {
-    const el = getBtnElFromClickEvent(e)
+    handlerBtnClickWithAnimate(e, updateRuleProviderByName.bind(null, name))
-
-    el.classList.add('animate-spin')
-    e.stopPropagation()
-    await updateRuleProviderByName(name)
-    el.classList.remove('animate-spin')
   }
 
-  const onUpdateAllProviderClick = async (e: MouseEvent) => {
+  const onUpdateAllProviderClick = (e: MouseEvent) => {
-    const el = getBtnElFromClickEvent(e)
+    handlerBtnClickWithAnimate(e, updateAllRuleProvider)
-
-    el.classList.add('animate-spin')
-    e.stopPropagation()
-    await updateAllRuleProvider()
-    el.classList.remove('animate-spin')
   }
 
   return (

src/signals/proxies.ts

@@ -16,59 +16,55 @@ const [proxyNodeMap, setProxyNodeMap] = createSignal<Record<string, ProxyInfo>>(
   {},
 )
 
+const setProxiesInfo = (proxies: (Proxy | ProxyNode)[]) => {
+  const newProxyNodeMap = { ...proxyNodeMap() }
+  const newLatencyMap = { ...latencyMap() }
+
+  proxies.forEach((proxy) => {
+    const latency = proxy.history.at(-1)?.delay || -1
+
+    newProxyNodeMap[proxy.name] = {
+      udp: proxy.udp,
+      type: proxy.type,
+      name: proxy.name,
+    }
+    newLatencyMap[proxy.name] = latency
+  })
+
+  setProxyNodeMap(newProxyNodeMap)
+  setLatencyMap(newLatencyMap)
+}
+
 export const useProxies = () => {
   const request = useRequest()
 
-  const setProxyInfoByProxies = (proxies: Proxy[] | ProxyNode[]) => {
-    proxies.forEach((proxy) => {
-      const latency = proxy.history.at(-1)?.delay || -1
-
-      setProxyNodeMap({
-        ...proxyNodeMap(),
-        [proxy.name]: {
-          udp: proxy.udp,
-          type: proxy.type,
-          name: proxy.name,
-        },
-      })
-      setLatencyMap({
-        ...latencyMap(),
-        [proxy.name]: latency,
-      })
-    })
-  }
-
   const updateProxies = async () => {
-    const { providers } = await request
+    const [{ providers }, { proxies }] = await Promise.all([
-      .get('providers/proxies')
+      request
-      .json<{ providers: Record<string, ProxyProvider> }>()
+        .get('providers/proxies')
+        .json<{ providers: Record<string, ProxyProvider> }>(),
+      request.get('proxies').json<{ proxies: Record<string, Proxy> }>(),
+    ])
 
-    Object.values(providers).forEach((provider) => {
-      setProxyInfoByProxies(provider.proxies)
-    })
-
-    setProxyProviders(
-      Object.values(providers).filter(
-        (provider) =>
-          provider.name !== 'default' && provider.vehicleType !== 'Compatible',
-      ),
-    )
-
-    const { proxies } = await request
-      .get('proxies')
-      .json<{ proxies: Record<string, Proxy> }>()
     const sortIndex = [...(proxies['GLOBAL'].all ?? []), 'GLOBAL']
-    const proxiesArray = Object.values(proxies)
+    const sortedProxies = Object.values(proxies)
-
+      .filter((proxy) => proxy.all?.length)
-    setProxyInfoByProxies(proxiesArray)
+      .sort(
-    setProxies(
+        (prev, next) =>
-      proxiesArray
+          sortIndex.indexOf(prev.name) - sortIndex.indexOf(next.name),
-        .filter((proxy) => proxy.all?.length)
+      )
-        .sort(
+    const sortedProviders = Object.values(providers).filter(
-          (prev, next) =>
+      (provider) =>
-            sortIndex.indexOf(prev.name) - sortIndex.indexOf(next.name),
+        provider.name !== 'default' && provider.vehicleType !== 'Compatible',
-        ),
     )
+    const allProxies: (Proxy | ProxyNode)[] = [
+      ...Object.values(proxies),
+      ...sortedProviders.flatMap((provider) => provider.proxies),
+    ]
+
+    setProxies(sortedProxies)
+    setProxyProviders(sortedProviders)
+    setProxiesInfo(allProxies)
   }
 
   const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => {