Polish server health checking feedback and bump Harbor versions

src/web/components/ServerPicker.jsx

@@ -38,14 +38,40 @@ function readAuto() {
 }
 
 function serverHealthText(ping) {
-  if (ping?.checking) return 'Проверяем TCP…';
   if (ping?.error) return 'Проверка недоступна';
   if (ping?.ok) return `TCP ${ping.latency} мс`;
   return ping ? 'TCP недоступен' : 'Не проверен';
 }
 
+function ServerHealth({ ping, fallback }) {
+  const health = fallback || serverHealthText(ping);
+  return <small
+    className={`client-server-health${ping?.checking ? ' is-checking' : ''}`}
+    title={ping?.checkedAt || undefined}
+    aria-label={ping?.checking ? 'Проверяем TCP' : health}
+  >
+    <span aria-hidden="true">{health}</span>
+    <span className="client-server-health-checking" aria-hidden="true">Проверяем TCP…</span>
+  </small>;
+}
+
+function ServerCheckButton({ checking, disabled, onClick }) {
+  return <button
+    className={`client-server-check${checking ? ' is-checking' : ''}`}
+    type="button"
+    aria-label={checking ? 'Проверяем доступность серверов по TCP' : 'Проверить доступность серверов по TCP'}
+    disabled={checking || disabled}
+    onClick={onClick}
+  >
+    <span>TCP</span>
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
+    </svg>
+  </button>;
+}
+
 function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect, onFavorite }) {
-  const health = serverHealthText(ping);
+  const health = ping?.checking ? 'Проверяем TCP' : serverHealthText(ping);
 
   return <div className={`client-server-row${selected ? ' is-selected' : ''}${onFavorite ? ' has-favorite' : ''}`}>
     <button
@@ -58,7 +84,7 @@ function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect
       onClick={() => onSelect(server.id)}
     >
       <strong>{server.label}</strong>
-      <small title={ping?.checkedAt || undefined}>{health}</small>
+      <ServerHealth ping={ping} />
     </button>
     {onFavorite && <button
       className={`client-server-favorite${favorite ? ' is-active' : ''}`}
@@ -136,23 +162,29 @@ export function ServerPicker({
   async function checkVisible() {
     const ids = [...new Set([selectedServerId, ...visible.map(({ id }) => id)].filter(Boolean))].slice(0, 30);
     if (!ids.length) return;
+    const startedAt = performance.now();
     setChecking(true);
     setPings((current) => ({
       ...current,
-      ...Object.fromEntries(ids.map((id) => [id, { checking: true }])),
+      ...Object.fromEntries(ids.map((id) => [id, { ...current[id], checking: true }])),
     }));
     try {
       const data = await api.servers.ping(ids);
       setPings((current) => ({
         ...current,
-        ...Object.fromEntries((data.results || []).map((result) => [result.id, result])),
+        ...Object.fromEntries((data.results || []).map((result) => [result.id, { ...result, checking: true }])),
       }));
     } catch {
       setPings((current) => ({
         ...current,
-        ...Object.fromEntries(ids.map((id) => [id, { error: true, checkedAt: new Date().toISOString() }])),
+        ...Object.fromEntries(ids.map((id) => [id, { error: true, checking: true, checkedAt: new Date().toISOString() }])),
       }));
     } finally {
+      await new Promise((resolve) => setTimeout(resolve, Math.max(0, 700 - (performance.now() - startedAt))));
+      setPings((current) => ({
+        ...current,
+        ...Object.fromEntries(ids.map((id) => [id, { ...current[id], checking: false }])),
+      }));
       setChecking(false);
     }
   }
@@ -167,9 +199,7 @@ export function ServerPicker({
     return <section className="client-servers" aria-label="Выберите сервер">
       {prompt && <span className="client-server-prompt">Выберите сервер</span>}
       <div className="client-server-toolbar is-single">
-        <button className="client-server-check" type="button" disabled={checking} onClick={checkVisible}>
-          {checking ? 'Проверяем…' : 'Проверить TCP'}
-        </button>
+        <ServerCheckButton checking={checking} onClick={checkVisible} />
       </div>
       <div className="client-server-grid">
         <ServerRow
@@ -217,9 +247,7 @@ export function ServerPicker({
         <span>Поиск и фильтры</span>
         <svg viewBox="0 0 12 8" aria-hidden="true"><path d="m1 1 5 5 5-5" /></svg>
       </button>
-      <button className="client-server-check" type="button" disabled={checking || !servers.length} onClick={checkVisible}>
-        {checking ? 'Проверяем…' : 'Проверить TCP'}
-      </button>
+      <ServerCheckButton checking={checking} disabled={!servers.length} onClick={checkVisible} />
     </div>
 
     <div className="client-server-mode-panels">
@@ -286,9 +314,10 @@ export function ServerPicker({
               onClick={() => select(autoServer(servers)?.id, true)}
             >
               <strong>Auto</strong>
-              <small title={pings[selectedServerId]?.checkedAt || undefined}>
-                {autoActive ? serverHealthText(pings[selectedServerId]) : 'Первый стабильный сервер'}
-              </small>
+              <ServerHealth
+                ping={autoActive ? pings[selectedServerId] : undefined}
+                fallback={autoActive ? undefined : 'Первый стабильный сервер'}
+              />
             </button>
             {selected && <ServerRow
               server={selected}