pre-refactor

webui/static/pages/interfaces.js

@@ -50,12 +50,17 @@ function cfgModal(name, state) {
     });
 }
 
-async function load(state) {
+async function load(state, abortController, entry) {
+    if (state.ifaces?.length) state.refreshing = true;
+    else state.loading = true;
     try {
+        const myId = entry ? entry.requestId : 0;
+        const sig = abortController?.signal;
         const [fw, net] = await Promise.all([
-            apiFetch('/api/firewall/zones'),
-            apiFetch('/api/network/interfaces'),
+            apiFetch('/api/firewall/zones', { signal: sig }),
+            apiFetch('/api/network/interfaces', { signal: sig }),
         ]);
+        if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
         // Extract zone names from available zones (for the dropdown)
         state.zones = fw.ok ? (fw.data?.available || []) : [];
         if (net.ok) {
@@ -78,23 +83,25 @@ async function load(state) {
             state.error = net.error;
         }
     } catch (e) {
+        if (abortController?.signal.aborted) return;
         state.error = String(e);
     }
     state.loading = false;
+    state.refreshing = false;
 }
 
 export default definePage({
     init() {
-        return { ifaces: [], zones: [], loading: true, error: null };
+        return { ifaces: [], zones: [], loading: true, refreshing: false, error: null };
     },
     subscribe: ['firewall', 'networkd'],
     load,
     render(state) {
-        if (state.loading) {
+        if (state.loading && !state.refreshing) {
             return [
                 PageHeader({ title: 'Interfaces' }),
                 h('div', { class: 'card', key: 'loading' },
-                    h('div', { class: 'card-body loading' }, 'Loading...'),
+                    h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
                 ),
             ];
         }