pre-refactor

webui/static/pages/certs.js

@@ -57,29 +57,36 @@ async function pollCertIssue(rid, state) {
     }, 2000);
 }
 
-async function load(state) {
+async function load(state, abortController, entry) {
+    if (state.certs?.length) state.refreshing = true;
+    else state.loading = true;
     try {
-        const r = await apiFetch('/api/certs/list');
+        const myId = entry ? entry.requestId : 0;
+        const sig = abortController?.signal;
+        const r = await apiFetch('/api/certs/list', { signal: sig });
+        if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
         if (r.ok) state.certs = r.data || [];
         else state.error = r.error;
     } catch (e) {
+        if (abortController?.signal.aborted) return;
         state.error = String(e);
     }
     state.loading = false;
+    state.refreshing = false;
 }
 
 export default definePage({
     init() {
-        return { certs: [], loading: true, error: null };
+        return { certs: [], loading: true, refreshing: false, error: null };
     },
     subscribe: ['acme'],
     load,
     render(state) {
-        if (state.loading) {
+        if (state.loading && !state.refreshing) {
             return [
                 PageHeader({ title: 'Certificates' }),
                 h('div', { class: 'card', key: 'loading' },
-                    h('div', { class: 'card-body loading' }, 'Loading...'),
+                    h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
                 ),
             ];
         }