fix: correct dashboard displaying

fe-app-podkop/src/helpers/index.ts

@@ -8,3 +8,4 @@ export * from './getProxyUrlName';
 export * from './onMount';
 export * from './getClashApiUrl';
 export * from './splitProxyString';
+export * from './preserveScrollForPage';

fe-app-podkop/src/helpers/preserveScrollForPage.ts

@@ -0,0 +1,9 @@
+export function preserveScrollForPage(renderFn: () => void) {
+  const scrollY = window.scrollY;
+
+  renderFn();
+
+  requestAnimationFrame(() => {
+    window.scrollTo({ top: scrollY });
+  });
+}

fe-app-podkop/src/podkop/methods/getDashboardSections.ts

@@ -62,9 +62,10 @@ export async function getDashboardSections(): Promise<IGetDashboardSectionsRespo
           );
 
           const parsedOutbound = JSON.parse(section.outbound_json);
-          const parsedTag = parsedOutbound?.tag ? decodeURIComponent(parsedOutbound?.tag) : undefined;
-          const proxyDisplayName = parsedTag || outbound?.value?.name || ''
-
+          const parsedTag = parsedOutbound?.tag
+            ? decodeURIComponent(parsedOutbound?.tag)
+            : undefined;
+          const proxyDisplayName = parsedTag || outbound?.value?.name || '';
 
           return {
             withTagSelect: false,

fe-app-podkop/src/podkop/tabs/dashboard/initDashboardController.ts

@@ -3,7 +3,11 @@ import {
   getPodkopStatus,
   getSingboxStatus,
 } from '../../methods';
-import { getClashWsUrl, onMount } from '../../../helpers';
+import {
+  getClashWsUrl,
+  onMount,
+  preserveScrollForPage,
+} from '../../../helpers';
 import {
   triggerLatencyGroupTest,
   triggerLatencyProxyTest,
@@ -31,6 +35,7 @@ async function fetchDashboardSections() {
 
   store.set({
     sectionsWidget: {
+      latencyFetching: false,
       loading: false,
       failed: !success,
       data,
@@ -130,25 +135,41 @@ async function handleChooseOutbound(selector: string, tag: string) {
 }
 
 async function handleTestGroupLatency(tag: string) {
+  store.set({
+    sectionsWidget: {
+      ...store.get().sectionsWidget,
+      latencyFetching: true,
+    },
+  });
+
   await triggerLatencyGroupTest(tag);
   await fetchDashboardSections();
+
+  store.set({
+    sectionsWidget: {
+      ...store.get().sectionsWidget,
+      latencyFetching: false,
+    },
+  });
 }
 
 async function handleTestProxyLatency(tag: string) {
+  store.set({
+    sectionsWidget: {
+      ...store.get().sectionsWidget,
+      latencyFetching: true,
+    },
+  });
+
   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);
-    });
+  store.set({
+    sectionsWidget: {
+      ...store.get().sectionsWidget,
+      latencyFetching: false,
+    },
+  });
 }
 
 // Renderer
@@ -170,8 +191,12 @@ async function renderSectionsWidget() {
       },
       onTestLatency: () => {},
       onChooseOutbound: () => {},
+      latencyFetching: sectionsWidget.latencyFetching,
+    });
+
+    return preserveScrollForPage(() => {
+      container!.replaceChildren(renderedWidget);
     });
-    return container!.replaceChildren(renderedWidget);
   }
 
   const renderedWidgets = sectionsWidget.data.map((section) =>
@@ -179,9 +204,8 @@ async function renderSectionsWidget() {
       loading: sectionsWidget.loading,
       failed: sectionsWidget.failed,
       section,
+      latencyFetching: sectionsWidget.latencyFetching,
       onTestLatency: (tag) => {
-        replaceTestLatencyButtonsWithSkeleton();
-
         if (section.withTagSelect) {
           return handleTestGroupLatency(tag);
         }
@@ -194,7 +218,9 @@ async function renderSectionsWidget() {
     }),
   );
 
-  return container!.replaceChildren(...renderedWidgets);
+  return preserveScrollForPage(() => {
+    container!.replaceChildren(...renderedWidgets);
+  });
 }
 
 async function renderBandwidthWidget() {

fe-app-podkop/src/podkop/tabs/dashboard/renderSections.ts

@@ -6,6 +6,7 @@ interface IRenderSectionsProps {
   section: Podkop.OutboundGroup;
   onTestLatency: (tag: string) => void;
   onChooseOutbound: (selector: string, tag: string) => void;
+  latencyFetching: boolean;
 }
 
 function renderFailedState() {
@@ -31,6 +32,7 @@ export function renderDefaultState({
   section,
   onChooseOutbound,
   onTestLatency,
+  latencyFetching,
 }: IRenderSectionsProps) {
   function testLatency() {
     if (section.withTagSelect) {
@@ -95,14 +97,16 @@ export function renderDefaultState({
         },
         section.displayName,
       ),
-      E(
-        'button',
-        {
-          class: 'btn dashboard-sections-grid-item-test-latency',
-          click: () => testLatency(),
-        },
-        _('Test latency'),
-      ),
+      latencyFetching
+        ? E('div', { class: 'skeleton', style: 'width: 99px; height: 28px' })
+        : E(
+            'button',
+            {
+              class: 'btn dashboard-sections-grid-item-test-latency',
+              click: () => testLatency(),
+            },
+            _('Test latency'),
+          ),
     ]),
     E(
       'div',

fe-app-podkop/src/store.ts

@@ -141,6 +141,7 @@ export interface StoreType {
     loading: boolean;
     failed: boolean;
     data: Podkop.OutboundGroup[];
+    latencyFetching: boolean;
   };
 }
 
@@ -172,6 +173,7 @@ const initialStore: StoreType = {
   sectionsWidget: {
     loading: true,
     failed: false,
+    latencyFetching: false,
     data: [],
   },
 };