From 3c991ad5d9a46f05246f3217aafea23cadbd7d24 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Tue, 7 Jun 2022 18:27:31 +0800
Subject: [PATCH] Avoid layout shift due to display of latency result

---
 package.json                                    |  3 ++-
 src/components/proxies/Proxy.tsx                | 10 +++++-----
 src/components/proxies/ProxyLatency.module.scss |  2 +-
 src/components/proxies/ProxyLatency.tsx         |  4 ++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index b37e5f5..4c3e7b7 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "pretty": "prettier --single-quote --write 'src/**/*.{js,scss,ts,tsx,md}'"
+    "pretty": "prettier --single-quote --write 'src/**/*.{js,scss,ts,tsx,md}'",
+    "fmt": "pnpm lint && pnpm pretty"
   },
   "browserslist": [
     ">0.25%",
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 8dc8caa..753a00c 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -2,6 +2,8 @@ import cx from 'clsx';
 import * as React from 'react';
 import { keyCodes } from 'src/misc/keycode';
 
+import { State } from '$src/store/types';
+
 import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies';
 import { connect } from '../StateProvider';
 import s0 from './Proxy.module.scss';
@@ -112,9 +114,7 @@ function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyPr
   }, [name, onClick, isSelectable]);
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.keyCode === keyCodes.Enter) {
-        doSelect();
-      }
+      if (e.key === 'Enter') doSelect();
     },
     [doSelect]
   );
@@ -139,13 +139,13 @@ function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyPr
         <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
           {formatProxyType(proxy.type)}
         </span>
-        {latency && latency.number ? <ProxyLatency number={latency.number} color={color} /> : null}
+        <ProxyLatency number={latency?.number} color={color} />
       </div>
     </div>
   );
 }
 
-const mapState = (s: any, { name }) => {
+const mapState = (s: State, { name }) => {
   const proxies = getProxies(s);
   const delay = getDelay(s);
   return {
diff --git a/src/components/proxies/ProxyLatency.module.scss b/src/components/proxies/ProxyLatency.module.scss
index 0671982..51efc9c 100644
--- a/src/components/proxies/ProxyLatency.module.scss
+++ b/src/components/proxies/ProxyLatency.module.scss
@@ -3,6 +3,6 @@
   color: #eee;
   font-size: 0.6em;
   @media (--breakpoint-not-small) {
-    font-size: 1em;
+    font-size: 0.85em;
   }
 }
diff --git a/src/components/proxies/ProxyLatency.tsx b/src/components/proxies/ProxyLatency.tsx
index 48e55af..29036d5 100644
--- a/src/components/proxies/ProxyLatency.tsx
+++ b/src/components/proxies/ProxyLatency.tsx
@@ -3,14 +3,14 @@ import * as React from 'react';
 import s0 from './ProxyLatency.module.scss';
 
 type ProxyLatencyProps = {
-  number: number;
+  number?: number;
   color: string;
 };
 
 export function ProxyLatency({ number, color }: ProxyLatencyProps) {
   return (
     <span className={s0.proxyLatency} style={{ color }}>
-      <span>{number} ms</span>
+      {typeof number === 'number' && number !== 0 ? number + ' ms' : ' '}
     </span>
   );
 }