Refine server health loading indicator and bump Harbor versions

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.8.8',
+  macClient: '0.8.9',
-  gatewayClient: '0.8.8',
+  gatewayClient: '0.8.9',
   gatewayBackend: '0.8.0',
 });
 

src/web/components/ServerPicker.jsx

@@ -53,7 +53,9 @@ function ServerHealth({ ping, fallback }) {
     aria-label={ping?.checking ? 'Проверяем пинг' : health}
   >
     <span aria-hidden="true">{health}</span>
-    <span className="client-server-health-checking" aria-hidden="true">Проверяем…</span>
+    <svg className="client-server-health-checking" 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>
   </small>;
 }
 

src/web/styles.css

@@ -2697,31 +2697,38 @@ p {
 .client-server-meta .client-server-health {
   width: 42px;
   min-height: 44px;
-  place-items: end center;
+  place-items: end start;
-  padding-bottom: 4px;
+  padding-bottom: 7px;
-  border-bottom: 1px solid var(--client-accent);
 }
 
-.client-server-health > span {
+.client-server-health > span,
+.client-server-health > svg {
   grid-area: 1 / 1;
   transition: opacity 420ms ease, filter 520ms cubic-bezier(0.16, 1, 0.3, 1), color 520ms ease;
 }
 
 .client-server-health-checking {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
   color: var(--client-accent);
   opacity: 0;
   filter: blur(4px);
-  text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 42%, transparent);
 }
 
 .client-server-health.is-checking > span:first-child {
-  opacity: 0.32;
+  opacity: 0;
   filter: blur(2px);
 }
 
 .client-server-health.is-checking .client-server-health-checking {
   opacity: 1;
   filter: blur(0);
+  animation: client-server-check-spin 700ms linear infinite;
 }
 
 .client-servers.is-scalable {
@@ -3058,7 +3065,7 @@ p {
   min-height: 44px;
   display: grid;
   place-items: center;
-  margin-left: 8px;
+  margin-left: 4px;
 }
 
 .client-server-row .client-server {
@@ -3619,6 +3626,7 @@ p {
   .client-server,
   .client-server-auto,
   .client-server-health > span,
+  .client-server-health > svg,
   .client-server-check,
   .client-server-check svg,
   .client-server-mode-toggle,

test/web/server-picker.test.js

@@ -55,7 +55,8 @@ test('server picker checks health only on manual refresh and bounds the result w
 
 test('manual ping uses plain language and keeps results beside server names', () => {
   assert.match(picker, /function ServerHealth/);
-  assert.match(picker, /client-server-health-checking/);
+  assert.match(picker, /<svg className="client-server-health-checking"/);
+  assert.doesNotMatch(picker, />Проверяем…<\/span>/);
   assert.match(picker, /function ServerCheckButton/);
   assert.match(picker, /client-server-check client-tooltip-anchor/);
   assert.match(picker, /<span className="client-tooltip" role="tooltip">/);
@@ -64,8 +65,9 @@ test('manual ping uses plain language and keeps results beside server names', ()
   assert.match(styles, /\.client-server-row \{[\s\S]*?grid-template-columns: minmax\(0, 1fr\) 120px minmax\(0, 1fr\);/);
   assert.match(styles, /\.client-server-row \.client-server \{[\s\S]*?width: 120px;/);
   assert.match(styles, /\.client-server-health \{[\s\S]*?font-size: 9px;[\s\S]*?font-variant-numeric: tabular-nums;/);
-  assert.match(styles, /\.client-server-meta \.client-server-health \{[\s\S]*?padding-bottom: 4px;[\s\S]*?border-bottom: 1px solid var\(--client-accent\);/);
+  assert.match(styles, /\.client-server-meta \.client-server-health \{[\s\S]*?place-items: end start;[\s\S]*?padding-bottom: 7px;/);
-  assert.match(styles, /\.client-server-meta \{[\s\S]*?width: 42px;[\s\S]*?margin-left: 8px;/);
+  assert.match(styles, /\.client-server-health\.is-checking \.client-server-health-checking \{[\s\S]*?animation: client-server-check-spin 700ms linear infinite;/);
+  assert.match(styles, /\.client-server-meta \{[\s\S]*?width: 42px;[\s\S]*?margin-left: 4px;/);
   assert.match(styles, /\.client-server-favorite \{[\s\S]*?position: absolute;[\s\S]*?width: 44px;/);
   assert.match(picker, /server={servers\[0\]}[\s\S]*?ping={pings\[servers\[0\]\.id\]}/);
   assert.match(picker, /simpleServers\.map[\s\S]*?ping={pings\[server\.id\]}/);