fix: harden release-critical workflows

Author: stefan-ernst

frontend/src/lib/composables/createAsyncLoader.svelte.js

@@ -7,20 +7,21 @@ export function createAsyncLoader(fetchFn) {
   let data = $state([]);
   let loading = $state(false);
   let error = $state(null);
+  let disposed = false;
 
   async function load() {
-    if (loading) return;
+    if (loading || disposed) return;
 
     loading = true;
     error = null;
 
     try {
-      data = (await fetchFn()) || [];
+      const result = await fetchFn();
+      if (disposed) return;
+      data = result || [];
     } catch (e) {
-      // Navigation and superseded requests abort in-flight fetches by design.
-      // The owning component is either gone or about to load newer data, so an
-      // AbortError is neither a user-visible loader error nor a console error.
-      if (e?.name === 'AbortError') return;
+      // Navigation can destroy the owner or abort its in-flight request.
+      if (disposed || e?.name === 'AbortError') return;
       console.error('Failed to load data:', e);
       error = e.message || 'Failed to load data';
       data = [];
@@ -34,6 +35,10 @@ export function createAsyncLoader(fetchFn) {
     await load();
   }
 
+  function dispose() {
+    disposed = true;
+  }
+
   return {
     get data() {
       return data;
@@ -46,5 +51,6 @@ export function createAsyncLoader(fetchFn) {
     },
     load,
     refetch,
+    dispose,
   };
 }

frontend/src/lib/pickers/AssetPicker.svelte

@@ -38,6 +38,7 @@
   // pagination, a column change, or navigation while its request was active.
   onDestroy(() => {
     externalLoadToken += 1;
+    assets.dispose();
   });
 
   const assets = createAsyncLoader(async () => {

frontend/src/lib/pickers/CustomerOrganisationPicker.svelte

@@ -3,7 +3,7 @@
   import { Building2 } from '@lucide/svelte';
   import { createAsyncLoader } from '../composables';
   import { api } from '../api.js';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
 
   let {
     value = $bindable(null),
@@ -21,6 +21,7 @@
 
   const organisations = createAsyncLoader(() => api.customerOrganisations.getAll());
   onMount(() => { if (providedOrganisations === null) organisations.load(); });
+  onDestroy(() => organisations.dispose());
   const organisationOptions = $derived(providedOrganisations ?? organisations.data ?? []);
 </script>
 

frontend/src/lib/pickers/DocumentPicker.svelte

@@ -2,7 +2,7 @@
   import { BasePicker } from '.';
   import { createAsyncLoader } from '../composables';
   import { api } from '../api.js';
-  import { untrack } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
   import { FileText } from '@lucide/svelte';
   import { t } from '../stores/i18n.svelte.js';
 
@@ -32,6 +32,7 @@
     const result = await api.logbook.listDocuments(bucketId, { limit: 50 });
     return result?.data ?? (Array.isArray(result) ? result : []);
   });
+  onDestroy(() => documents.dispose());
 
   // Reload when bucketId or searchQuery changes
   $effect(() => {

frontend/src/lib/pickers/GroupPicker.svelte

@@ -2,7 +2,7 @@
   import { BasePicker } from '.';
   import { createAsyncLoader } from '../composables';
   import { api } from '../api.js';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import { Users } from '@lucide/svelte';
   import { t } from '../stores/i18n.svelte.js';
 
@@ -21,6 +21,7 @@
   const groups = createAsyncLoader(() => api.get('/groups'));
 
   onMount(() => groups.load());
+  onDestroy(() => groups.dispose());
 </script>
 
 <BasePicker

frontend/src/lib/pickers/PagePicker.svelte

@@ -3,7 +3,7 @@
   import { createAsyncLoader } from '../composables';
   import { api } from '../api.js';
   import { FileText } from '@lucide/svelte';
-  import { untrack } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
   import { t } from '../stores/i18n.svelte.js';
 
   let {
@@ -33,6 +33,7 @@
     const items = result?.results ?? (Array.isArray(result) ? result : []);
     return items;
   });
+  onDestroy(() => pages.dispose());
 
   $effect(() => {
     if (workspaceId) {

frontend/src/lib/pickers/PortalCustomerPicker.svelte

@@ -3,7 +3,7 @@
   import { User } from '@lucide/svelte';
   import { createAsyncLoader } from '../composables';
   import { api } from '../api.js';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
 
   let {
     value = $bindable(null),
@@ -21,6 +21,7 @@
 
   const customers = createAsyncLoader(() => api.portalCustomers.getAll());
   onMount(() => { if (providedCustomers === null) customers.load(); });
+  onDestroy(() => customers.dispose());
   const customerOptions = $derived(providedCustomers ?? customers.data ?? []);
 </script>
 

frontend/src/lib/pickers/RolePicker.svelte

@@ -2,7 +2,7 @@
   import { BasePicker } from '.';
   import { createAsyncLoader } from '../composables';
   import { api } from '../api.js';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import { Shield } from '@lucide/svelte';
   import { t } from '../stores/i18n.svelte.js';
 
@@ -24,6 +24,7 @@
   const roles = createAsyncLoader(() => api.get('/workspace-roles'));
 
   onMount(() => roles.load());
+  onDestroy(() => roles.dispose());
 </script>
 
 <BasePicker

frontend/src/lib/pickers/UserPicker.svelte

@@ -3,7 +3,7 @@
   import { BasePicker } from '.';
   import { createAsyncLoader } from '../composables';
   import { api } from '../api.js';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import Avatar from '../components/Avatar.svelte';
   import Text from '../components/Text.svelte';
   import { t } from '../stores/i18n.svelte.js';
@@ -37,6 +37,7 @@
     workspaceId ? api.getAssignableUsers(workspaceId) : api.getUsers()
   );
   onMount(() => { if (!users) loader.load(); });
+  onDestroy(() => loader.dispose());
 
   let usersList = $derived(users ?? loader.data ?? []);