feat: add loaders to test latency buttons

This commit is contained in:
divocat
2025-10-06 21:15:01 +03:00
parent caf82b096f
commit 1e4cda9400
3 changed files with 27 additions and 3 deletions

View File

@@ -66,7 +66,7 @@ async function connectToClashSockets() {
});
}
// Renderer
// Handlers
async function handleChooseOutbound(selector: string, tag: string) {
await triggerProxySelector(selector, tag);
@@ -83,6 +83,18 @@ async function handleTestProxyLatency(tag: string) {
await fetchDashboardSections();
}
function replaceTestLatencyButtonsWithSkeleton () {
document.querySelectorAll('.dashboard-sections-grid-item-test-latency').forEach(el => {
const newDiv = document.createElement('div');
newDiv.className = 'skeleton';
newDiv.style.width = '99px';
newDiv.style.height = '28px';
el.replaceWith(newDiv);
});
}
// Renderer
async function renderDashboardSections() {
const sections = store.get().sections;
console.log('render dashboard sections group');
@@ -91,6 +103,8 @@ async function renderDashboardSections() {
renderOutboundGroup({
section,
onTestLatency: (tag) => {
replaceTestLatencyButtonsWithSkeleton();
if (section.withTagSelect) {
return handleTestGroupLatency(tag);
}

View File

@@ -74,7 +74,7 @@ export function renderOutboundGroup({
},
section.displayName,
),
E('button', { class: 'btn', click: () => testLatency() }, 'Test latency'),
E('button', { class: 'btn dashboard-sections-grid-item-test-latency', click: () => testLatency() }, 'Test latency'),
]),
E(
'div',

View File

@@ -1164,7 +1164,7 @@ function renderOutboundGroup({
},
section.displayName
),
E("button", { class: "btn", click: () => testLatency() }, "Test latency")
E("button", { class: "btn dashboard-sections-grid-item-test-latency", click: () => testLatency() }, "Test latency")
]),
E(
"div",
@@ -1398,6 +1398,15 @@ async function handleTestProxyLatency(tag) {
await triggerLatencyProxyTest(tag);
await fetchDashboardSections();
}
function replaceTestLatencyButtonsWithSkeleton() {
document.querySelectorAll(".dashboard-sections-grid-item-test-latency").forEach((el) => {
const newDiv = document.createElement("div");
newDiv.className = "skeleton";
newDiv.style.width = "99px";
newDiv.style.height = "28px";
el.replaceWith(newDiv);
});
}
async function renderDashboardSections() {
const sections = store.get().sections;
console.log("render dashboard sections group");
@@ -1406,6 +1415,7 @@ async function renderDashboardSections() {
(section) => renderOutboundGroup({
section,
onTestLatency: (tag) => {
replaceTestLatencyButtonsWithSkeleton();
if (section.withTagSelect) {
return handleTestGroupLatency(tag);
}