pre-refactor

webui/static/pages/rules.js

@@ -33,31 +33,39 @@ function addRuleModal(zones, state) {
     });
 }
 
-async function load(state) {
+async function load(state, abortController, entry) {
+    if (Object.keys(state.config || {}).length) state.refreshing = true;
+    else state.loading = true;
     try {
-        const r = await apiFetch('/api/firewall/config');
+        const myId = entry ? entry.requestId : 0;
+        const sig = abortController?.signal;
+        const r = await apiFetch('/api/firewall/config', { signal: sig });
+        if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
         if (r.ok) state.config = r.data || {};
         else state.error = r.error;
-        const zr = await apiFetch('/api/firewall/zones');
+        const zr = await apiFetch('/api/firewall/zones', { signal: sig });
+        if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
         if (zr.ok) state.zones = Object.keys(zr.data?.active || {});
     } catch (e) {
+        if (abortController?.signal.aborted) return;
         state.error = String(e);
     }
     state.loading = false;
+    state.refreshing = false;
 }
 
 export default definePage({
     init() {
-        return { config: {}, loading: true, error: null, zones: [] };
+        return { config: {}, loading: true, refreshing: false, error: null, zones: [] };
     },
     subscribe: ['firewall'],
     load,
     render(state) {
-        if (state.loading) {
+        if (state.loading && !state.refreshing) {
             return [
                 PageHeader({ title: 'Rules', subtitle: 'Firewall rich rules' }),
                 h('div', { class: 'card', key: 'loading' },
-                    h('div', { class: 'card-body loading' }, 'Loading...'),
+                    h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
                 ),
             ];
         }