pre-refactor

webui/static/pages/proxy.js

@@ -82,30 +82,38 @@ function editDomainModal(domain, state) {
     });
 }
 
-async function load(state) {
+async function load(state, abortController, entry) {
+    if (state.domains?.length) state.refreshing = true;
+    else state.loading = true;
     try {
-        const domainsR = await apiFetch('/api/proxy/domains');
+        const myId = entry ? entry.requestId : 0;
+        const sig = abortController?.signal;
+        const domainsR = await apiFetch('/api/proxy/domains', { signal: sig });
+        if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
         if (domainsR.ok) state.domains = domainsR.data || [];
-        const certsR = await apiFetch('/api/certs/list');
+        const certsR = await apiFetch('/api/certs/list', { signal: sig });
+        if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
         if (certsR.ok) state.certs = certsR.data || [];
     } catch (e) {
+        if (abortController?.signal.aborted) return;
         state.error = String(e);
     }
     state.loading = false;
+    state.refreshing = false;
 }
 
 export default definePage({
     init() {
-        return { domains: [], certs: [], loading: true, error: null };
+        return { domains: [], certs: [], loading: true, refreshing: false, error: null };
     },
     subscribe: ['nginx', 'acme'],
     load,
     render(state) {
-        if (state.loading) {
+        if (state.loading && !state.refreshing) {
             return [
                 PageHeader({ title: 'Proxy' }),
                 h('div', { class: 'card', key: 'loading' },
-                    h('div', { class: 'card-body loading' }, 'Loading...'),
+                    h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
                 ),
             ];
         }