Avoid layout shift due to display of latency result

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%",

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 {

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;
   }
 }

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>
   );
 }