diff --git a/src/shared/versions.js b/src/shared/versions.js
index 0a0fb74..80c7b81 100644
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({
- macClient: '0.8.8',
- gatewayClient: '0.8.8',
+ macClient: '0.8.9',
+ gatewayClient: '0.8.9',
gatewayBackend: '0.8.0',
});
diff --git a/src/web/components/ServerPicker.jsx b/src/web/components/ServerPicker.jsx
index 476fd92..61d9736 100644
--- a/src/web/components/ServerPicker.jsx
+++ b/src/web/components/ServerPicker.jsx
@@ -53,7 +53,9 @@ function ServerHealth({ ping, fallback }) {
aria-label={ping?.checking ? 'Проверяем пинг' : health}
>
{health}
- Проверяем…
+
;
}
diff --git a/src/web/styles.css b/src/web/styles.css
index ae22edc..ab777ef 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -2697,31 +2697,38 @@ p {
.client-server-meta .client-server-health {
width: 42px;
min-height: 44px;
- place-items: end center;
- padding-bottom: 4px;
- border-bottom: 1px solid var(--client-accent);
+ place-items: end start;
+ padding-bottom: 7px;
}
-.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,
diff --git a/test/web/server-picker.test.js b/test/web/server-picker.test.js
index 10548ff..3601808 100644
--- a/test/web/server-picker.test.js
+++ b/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, /Проверяем…<\/span>/);
assert.match(picker, /function ServerCheckButton/);
assert.match(picker, /client-server-check client-tooltip-anchor/);
assert.match(picker, //);
@@ -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 \{[\s\S]*?width: 42px;[\s\S]*?margin-left: 8px;/);
+ 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-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\]}/);