fix(proxies): latency widget

src/components/Latency.tsx

@@ -22,18 +22,16 @@ export const Latency = (props: { name?: string }) => {
   })
 
   return (
-    <>
     <Show
       when={
         typeof latency() === 'number' &&
         latency() !== LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED
       }
     >
-        <span class={`whitespace-nowrap ${textClassName()}`}>
+      <span class={`whitespace-nowrap text-xs ${textClassName()}`}>
         {latency()}
         {t('ms')}
       </span>
     </Show>
-    </>
   )
 }

src/components/ProxyCardGroups.tsx

@@ -3,17 +3,17 @@ import { createMemo, createSignal } from 'solid-js'
 import { ProxyNodeCard } from '~/components'
 
 export const ProxyCardGroups = (props: {
-  proxies: string[]
+  proxyNames: string[]
   now?: string
   onClick?: (name: string) => void
 }) => {
   const [maxRender, setMaxRender] = createSignal(100)
-  const proxies = createMemo(() => props.proxies.slice(0, maxRender()))
+  const proxyNames = createMemo(() => props.proxyNames.slice(0, maxRender()))
 
   return (
     <InfiniteScroll
-      each={proxies()}
+      each={proxyNames()}
-      hasMore={proxies().length < props.proxies.length}
+      hasMore={proxyNames().length < props.proxyNames.length}
       next={() => setMaxRender(maxRender() + 30)}
     >
       {(proxy) => (

src/components/ProxyPreviewBar.tsx

@@ -8,7 +8,7 @@ export const ProxyPreviewBar = (props: {
 }) => {
   const { latencyMap } = useProxies()
   const latencyList = createMemo(() =>
-    props.proxyNameList.map((i) => latencyMap()[i]),
+    props.proxyNameList.map((name) => latencyMap()[name]),
   )
   const all = createMemo(() => latencyList().length)
   const good = createMemo(
@@ -42,7 +42,7 @@ export const ProxyPreviewBar = (props: {
   )
 
   return (
-    <div class="flex h-6 w-full items-center">
+    <div class="flex h-6 w-full items-center gap-2">
       <div class="flex flex-1 overflow-hidden rounded-2xl">
         <div
           class="h-2 bg-success"
@@ -69,9 +69,8 @@ export const ProxyPreviewBar = (props: {
           }}
         ></div>
       </div>
-      <div class="ml-3 w-8 text-xs">
+
       <Latency name={props.now} />
     </div>
-    </div>
   )
 }

src/components/index.ts

@@ -1,5 +1,5 @@
 export * from './Button'
-export * from './Collpase'
+export * from './Collapse'
 export * from './ConnectionsTableOrderingModal'
 export * from './ForTwoColumns'
 export * from './Header'

src/pages/Proxies.tsx

@@ -45,6 +45,12 @@ export default () => {
       </h1>
       <ForTwoColumns
         subChild={proxies().map((proxy) => {
+          const sortedProxyNames = sortProxiesByOrderingType(
+            proxy.all ?? [],
+            latencyMap(),
+            proxiesOrderingType(),
+          )
+
           const title = (
             <>
               <div class="mr-10 flex items-center justify-between">
@@ -61,11 +67,7 @@ export default () => {
               </div>
               <Show when={!collapsedMap()[`group-${proxy.name}`]}>
                 <ProxyNodePreview
-                  proxyNameList={sortProxiesByOrderingType(
+                  proxyNameList={sortedProxyNames}
-                    proxy.all ?? [],
-                    latencyMap(),
-                    proxiesOrderingType(),
-                  )}
                   now={proxy.now}
                 />
               </Show>
@@ -74,11 +76,7 @@ export default () => {
 
           const content = (
             <ProxyCardGroups
-              proxies={sortProxiesByOrderingType(
+              proxyNames={sortedProxyNames}
-                proxy.all ?? [],
-                latencyMap(),
-                proxiesOrderingType(),
-              )}
               now={proxy.now}
               onClick={(name) => {
                 onProxyNodeClick(proxy, name)

src/pages/ProxyProvider.tsx

@@ -9,8 +9,12 @@ import {
   ProxyNodePreview,
   SubscriptionInfo,
 } from '~/components'
-import { formatTimeFromNow, getBtnElFromClickEvent } from '~/helpers'
+import {
-import { useProxies } from '~/signals'
+  formatTimeFromNow,
+  getBtnElFromClickEvent,
+  sortProxiesByOrderingType,
+} from '~/helpers'
+import { proxiesOrderingType, useProxies } from '~/signals'
 
 export default () => {
   const [t] = useI18n()
@@ -19,6 +23,7 @@ export default () => {
     updateProviderByProviderName,
     updateAllProvider,
     healthCheckByProviderName,
+    latencyMap,
   } = useProxies()
 
   const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
@@ -66,6 +71,12 @@ export default () => {
       </h1>
       <ForTwoColumns
         subChild={proxyProviders().map((proxyProvider) => {
+          const sortedProxyNames = sortProxiesByOrderingType(
+            proxyProvider.proxies.map((i) => i.name) ?? [],
+            latencyMap(),
+            proxiesOrderingType(),
+          )
+
           const title = (
             <>
               <div class="mr-8 flex items-center justify-between">
@@ -96,18 +107,12 @@ export default () => {
                 {formatTimeFromNow(proxyProvider.updatedAt)}
               </div>
               <Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>
-                <ProxyNodePreview
+                <ProxyNodePreview proxyNameList={sortedProxyNames} />
-                  proxyNameList={proxyProvider.proxies.map((i) => i.name) ?? []}
-                />
               </Show>
             </>
           )
 
-          const content = (
+          const content = <ProxyCardGroups proxyNames={sortedProxyNames} />
-            <ProxyCardGroups
-              proxies={proxyProvider.proxies.map((i) => i.name)}
-            />
-          )
 
           return (
             <Collapse