From 1e4cda9400d5f99c7cacf02660faf7aeec721c2b Mon Sep 17 00:00:00 2001
From: divocat <divocatt@gmail.com>
Date: Mon, 6 Oct 2025 21:15:01 +0300
Subject: [PATCH] feat: add loaders to test latency buttons

---
 .../src/dashboard/initDashboardController.ts     | 16 +++++++++++++++-
 .../dashboard/renderer/renderOutboundGroup.ts    |  2 +-
 .../luci-static/resources/view/podkop/main.js    | 12 +++++++++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/fe-app-podkop/src/dashboard/initDashboardController.ts b/fe-app-podkop/src/dashboard/initDashboardController.ts
index aa457df..ecba535 100644
--- a/fe-app-podkop/src/dashboard/initDashboardController.ts
+++ b/fe-app-podkop/src/dashboard/initDashboardController.ts
@@ -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);
         }
diff --git a/fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts b/fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts
index b982dd9..1ac5ebe 100644
--- a/fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts
+++ b/fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts
@@ -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',
diff --git a/luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js b/luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js
index 197deb7..d005a9a 100644
--- a/luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js
+++ b/luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js
@@ -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);
         }