From 752c1daf8a1c6c5c49b1f98dbe06f72927da3c9d Mon Sep 17 00:00:00 2001
From: dudina-ma <dudina27maria@gmail.com>
Date: Wed, 8 Jul 2026 10:05:26 +0200
Subject: [PATCH 1/3] [tasks] fix task pagination race in project view

---
 frontend/src/lib/pages/project-tasks.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/pages/project-tasks.svelte b/frontend/src/lib/pages/project-tasks.svelte
index 7bef64d..e046ad0 100644
--- a/frontend/src/lib/pages/project-tasks.svelte
+++ b/frontend/src/lib/pages/project-tasks.svelte
@@ -26,6 +26,7 @@
   let sort = $state("-created_at");
   let offset = $state(0);
   const limit = 50;
+  let requestVersion = 0;
 
   let filterStatuses = $state<string[]>([...ACTIVE_STATUSES]);
   let filterPriorities = $state<string[]>([]);
@@ -58,6 +59,7 @@
 
   function load() {
     if (!slug) return;
+    const version = ++requestVersion;
     loading = true;
     error = "";
 
@@ -69,15 +71,18 @@
 
     Promise.all([getProject(slug), listTasks(filters)])
       .then(([proj, res]) => {
+        if (version !== requestVersion) return;
         project = proj;
         tasks = res.items;
         total = res.total;
         touchProject({ id: proj.id, name: proj.name });
       })
       .catch((e) => {
+        if (version !== requestVersion) return;
         error = e.message || "Failed to load data";
       })
       .finally(() => {
+        if (version !== requestVersion) return;
         loading = false;
       });
   }
@@ -138,7 +143,6 @@
               disabled={offset === 0}
               onclick={() => {
                 offset = Math.max(0, offset - limit);
-                load();
               }}
             >
               Previous
@@ -154,7 +158,6 @@
               disabled={offset + limit >= total}
               onclick={() => {
                 offset = offset + limit;
-                load();
               }}
             >
               Next

From 3b912ab46bb3e9b6574ad84dc81dfb4383a0c707 Mon Sep 17 00:00:00 2001
From: dudina-ma <dudina27maria@gmail.com>
Date: Fri, 10 Jul 2026 12:01:11 +0200
Subject: [PATCH 2/3] [frontend] fix race conditions

---
 .../lib/components/AssigneeCombobox.svelte    | 27 ++++++-----
 .../src/lib/components/TaskFilters.svelte     |  6 ++-
 frontend/src/lib/latest-request.ts            | 44 ++++++++++++++++++
 frontend/src/lib/pages/admin-projects.svelte  | 28 ++++++++----
 frontend/src/lib/pages/admin-users.svelte     | 43 +++++++++++-------
 .../src/lib/pages/dashboard-personal.svelte   | 45 +++++++++++--------
 frontend/src/lib/pages/dashboard-tasks.svelte | 39 +++++++++-------
 frontend/src/lib/pages/project-tasks.svelte   | 33 +++++++-------
 frontend/src/lib/pages/projects.svelte        | 36 ++++++++-------
 9 files changed, 196 insertions(+), 105 deletions(-)
 create mode 100644 frontend/src/lib/latest-request.ts

diff --git a/frontend/src/lib/components/AssigneeCombobox.svelte b/frontend/src/lib/components/AssigneeCombobox.svelte
index c3f1987..ab2498e 100644
--- a/frontend/src/lib/components/AssigneeCombobox.svelte
+++ b/frontend/src/lib/components/AssigneeCombobox.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { searchUsers } from "$lib/api/users";
   import type { UserBrief } from "$lib/types/api";
+  import { createLatestRequestGuard, runLatest } from "$lib/latest-request";
 
   let {
     value = $bindable<number | null>(null),
@@ -20,35 +21,33 @@
   let loading = $state(false);
   let selectedName = $state("");
   let timer: ReturnType<typeof setTimeout> | null = null;
-  let requestSeq = 0;
+  const requestGuard = createLatestRequestGuard();
 
   $effect(() => {
     if (initialName) selectedName = initialName;
   });
 
   function doSearch(q: string) {
-    const seq = ++requestSeq;
     if (!q.trim()) {
+      requestGuard.invalidate();
       results = [];
       open = false;
       loading = false;
       return;
     }
     loading = true;
-    searchUsers(q, 10)
-      .then((r) => {
-        if (seq !== requestSeq) return;
+    runLatest(requestGuard, () => searchUsers(q, 10), {
+      onSuccess: (r) => {
         results = r.items;
         open = true;
-      })
-      .catch(() => {
-        if (seq !== requestSeq) return;
+      },
+      onError: () => {
         results = [];
-      })
-      .finally(() => {
-        if (seq !== requestSeq) return;
+      },
+      onFinally: () => {
         loading = false;
-      });
+      },
+    });
   }
 
   function handleInput(e: Event) {
@@ -59,7 +58,7 @@
   }
 
   function select(user: UserBrief) {
-    requestSeq++;
+    requestGuard.invalidate();
     value = user.id;
     selectedName = user.name;
     query = "";
@@ -68,7 +67,7 @@
   }
 
   function clear() {
-    requestSeq++;
+    requestGuard.invalidate();
     value = null;
     selectedName = "";
     query = "";
diff --git a/frontend/src/lib/components/TaskFilters.svelte b/frontend/src/lib/components/TaskFilters.svelte
index 5d5cd14..7dd8e05 100644
--- a/frontend/src/lib/components/TaskFilters.svelte
+++ b/frontend/src/lib/components/TaskFilters.svelte
@@ -53,7 +53,11 @@
     if (!mounted) return;
     const value = draft;
     const timer = setTimeout(() => {
-      untrack(() => onSearchChange?.(value));
+      untrack(() => {
+        if (value !== searchQuery) {
+          onSearchChange?.(value);
+        }
+      });
     }, 250);
     return () => clearTimeout(timer);
   });
diff --git a/frontend/src/lib/latest-request.ts b/frontend/src/lib/latest-request.ts
new file mode 100644
index 0000000..9845b8d
--- /dev/null
+++ b/frontend/src/lib/latest-request.ts
@@ -0,0 +1,44 @@
+export function createLatestRequestGuard() {
+  let version = 0;
+
+  return {
+    next(): number {
+      return ++version;
+    },
+    isLatest(token: number): boolean {
+      return token === version;
+    },
+    invalidate(): void {
+      version++;
+    },
+  };
+}
+
+export type LatestRequestGuard = ReturnType<typeof createLatestRequestGuard>;
+
+type RunLatestHandlers<T> = {
+  onSuccess: (value: T) => void;
+  onError?: (error: unknown) => void;
+  onFinally?: () => void;
+};
+
+export function runLatest<T>(
+  guard: LatestRequestGuard,
+  work: () => Promise<T>,
+  handlers: RunLatestHandlers<T>,
+): void {
+  const token = guard.next();
+  work()
+    .then((value) => {
+      if (!guard.isLatest(token)) return;
+      handlers.onSuccess(value);
+    })
+    .catch((error) => {
+      if (!guard.isLatest(token)) return;
+      handlers.onError?.(error);
+    })
+    .finally(() => {
+      if (!guard.isLatest(token)) return;
+      handlers.onFinally?.();
+    });
+}
diff --git a/frontend/src/lib/pages/admin-projects.svelte b/frontend/src/lib/pages/admin-projects.svelte
index 290b890..80142de 100644
--- a/frontend/src/lib/pages/admin-projects.svelte
+++ b/frontend/src/lib/pages/admin-projects.svelte
@@ -14,6 +14,7 @@
   import SearchIcon from "@lucide/svelte/icons/search";
   import XIcon from "@lucide/svelte/icons/x";
   import type { Project } from "$lib/types/api";
+  import { createLatestRequestGuard, runLatest } from "$lib/latest-request";
 
   let projects = $state<Project[]>([]);
   let loading = $state(true);
@@ -33,6 +34,8 @@
   let editRepoUrl = $state("");
   let editSaving = $state(false);
 
+  const requestGuard = createLatestRequestGuard();
+
   function handleSearchInput(value: string) {
     searchTerm = value;
     if (searchTimeout) clearTimeout(searchTimeout);
@@ -57,17 +60,24 @@
     return new Date(dateStr).toLocaleDateString();
   }
 
-  async function load() {
+  function load() {
     loading = true;
     error = "";
-    try {
-      const res = await listProjects(100, 0, debouncedSearch || undefined);
-      projects = res.items;
-    } catch (e: any) {
-      error = e?.message || "Failed to load projects";
-    } finally {
-      loading = false;
-    }
+    runLatest(
+      requestGuard,
+      () => listProjects(100, 0, debouncedSearch || undefined),
+      {
+        onSuccess: (res) => {
+          projects = res.items;
+        },
+        onError: (e) => {
+          error = (e as Error)?.message || "Failed to load projects";
+        },
+        onFinally: () => {
+          loading = false;
+        },
+      },
+    );
   }
 
   function openCreate() {
diff --git a/frontend/src/lib/pages/admin-users.svelte b/frontend/src/lib/pages/admin-users.svelte
index 6ebaee8..aca7baf 100644
--- a/frontend/src/lib/pages/admin-users.svelte
+++ b/frontend/src/lib/pages/admin-users.svelte
@@ -9,6 +9,7 @@
   import * as Badge from "$lib/components/ui/badge";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { User } from "$lib/types/api";
+  import { createLatestRequestGuard, runLatest } from "$lib/latest-request";
 
   const PAGE_SIZE = 20;
 
@@ -29,6 +30,8 @@
 
   let activatingId = $state<number | null>(null);
 
+  const requestGuard = createLatestRequestGuard();
+
   let totalPages = $derived(Math.max(1, Math.ceil(total / PAGE_SIZE)));
 
   const statusBadgeColors: Record<string, string> = {
@@ -50,24 +53,32 @@
     return new Date(dateStr).toLocaleDateString();
   }
 
-  async function loadUsers() {
+  function loadUsers() {
     loading = true;
     error = "";
-    try {
-      const res = await listUsers({
-        status: filterStatus || undefined,
-        role: filterRole || undefined,
-        limit: PAGE_SIZE,
-        offset: (page - 1) * PAGE_SIZE,
-      });
-      users = res.items;
-      total = res.total;
-    } catch (e: any) {
-      error = e?.message || "Failed to load users";
-      users = [];
-    } finally {
-      loading = false;
-    }
+    runLatest(
+      requestGuard,
+      () =>
+        listUsers({
+          status: filterStatus || undefined,
+          role: filterRole || undefined,
+          limit: PAGE_SIZE,
+          offset: (page - 1) * PAGE_SIZE,
+        }),
+      {
+        onSuccess: (res) => {
+          users = res.items;
+          total = res.total;
+        },
+        onError: (e) => {
+          error = (e as Error)?.message || "Failed to load users";
+          users = [];
+        },
+        onFinally: () => {
+          loading = false;
+        },
+      },
+    );
   }
 
   function onFilterChange() {
diff --git a/frontend/src/lib/pages/dashboard-personal.svelte b/frontend/src/lib/pages/dashboard-personal.svelte
index c269505..a0ee48e 100644
--- a/frontend/src/lib/pages/dashboard-personal.svelte
+++ b/frontend/src/lib/pages/dashboard-personal.svelte
@@ -9,6 +9,7 @@
   import * as Card from "$lib/components/ui/card";
   import type { Task, Project } from "$lib/types/api";
   import { ACTIVE_STATUSES } from "$lib/types/api";
+  import { createLatestRequestGuard, runLatest } from "$lib/latest-request";
 
   let { params = {} }: { params?: Record<string, string> } = $props();
 
@@ -25,6 +26,8 @@
   let searchQuery = $state("");
   let sort = $state("-created_at");
 
+  const requestGuard = createLatestRequestGuard();
+
   function toggleStatus(s: string) {
     if (filterStatuses.includes(s)) {
       filterStatuses = filterStatuses.filter((x) => x !== s);
@@ -73,24 +76,30 @@
       filters.priorities = filterPriorities.join(",");
     if (searchQuery) filters.search = searchQuery;
 
-    Promise.all([
-      listProjects(100, 0).then((r) => {
-        projects = r.items;
-      }),
-      getMyTasks({ limit: 50, ...filters }).then((res) => {
-        const currentUserId = getUser()?.id;
-        createdTasks = res.items.filter((t) => t.author.id === currentUserId);
-        assignedTasks = res.items.filter(
-          (t) => t.assignee?.id === currentUserId,
-        );
-      }),
-    ])
-      .catch((e) => {
-        error = e.message || "Failed to load tasks";
-      })
-      .finally(() => {
-        loading = false;
-      });
+    runLatest(
+      requestGuard,
+      () =>
+        Promise.all([
+          listProjects(100, 0).then((r) => r.items),
+          getMyTasks({ limit: 50, ...filters }).then((res) => res.items),
+        ]),
+      {
+        onSuccess: ([projectItems, taskItems]) => {
+          projects = projectItems;
+          const currentUserId = getUser()?.id;
+          createdTasks = taskItems.filter((t) => t.author.id === currentUserId);
+          assignedTasks = taskItems.filter(
+            (t) => t.assignee?.id === currentUserId,
+          );
+        },
+        onError: (e) => {
+          error = (e as Error).message || "Failed to load tasks";
+        },
+        onFinally: () => {
+          loading = false;
+        },
+      },
+    );
   });
 </script>
 
diff --git a/frontend/src/lib/pages/dashboard-tasks.svelte b/frontend/src/lib/pages/dashboard-tasks.svelte
index 742dc73..f0e57c8 100644
--- a/frontend/src/lib/pages/dashboard-tasks.svelte
+++ b/frontend/src/lib/pages/dashboard-tasks.svelte
@@ -11,6 +11,7 @@
   import { Button } from "$lib/components/ui/button";
   import type { Project, Task } from "$lib/types/api";
   import { ACTIVE_STATUSES } from "$lib/types/api";
+  import { createLatestRequestGuard, runLatest } from "$lib/latest-request";
 
   let { params = {} }: { params?: Record<string, string> } = $props();
 
@@ -28,6 +29,8 @@
   let offset = $state(0);
   const limit = 50;
 
+  const requestGuard = createLatestRequestGuard();
+
   function toggleStatus(s: string) {
     if (filterStatuses.includes(s)) {
       filterStatuses = filterStatuses.filter((x) => x !== s);
@@ -71,21 +74,27 @@
       filters.priorities = filterPriorities.join(",");
     if (searchQuery) filters.search = searchQuery;
 
-    Promise.all([
-      listProjects(100, 0).then((r) => {
-        projects = r.items;
-      }),
-      listTasks(filters).then((r) => {
-        tasks = r.items;
-        total = r.total;
-      }),
-    ])
-      .catch((e) => {
-        error = e.message || "Failed to load tasks";
-      })
-      .finally(() => {
-        loading = false;
-      });
+    runLatest(
+      requestGuard,
+      () =>
+        Promise.all([
+          listProjects(100, 0).then((r) => r.items),
+          listTasks(filters).then((r) => ({ items: r.items, total: r.total })),
+        ]),
+      {
+        onSuccess: ([projectItems, taskRes]) => {
+          projects = projectItems;
+          tasks = taskRes.items;
+          total = taskRes.total;
+        },
+        onError: (e) => {
+          error = (e as Error).message || "Failed to load tasks";
+        },
+        onFinally: () => {
+          loading = false;
+        },
+      },
+    );
   }
 
   function resetFilters() {
diff --git a/frontend/src/lib/pages/project-tasks.svelte b/frontend/src/lib/pages/project-tasks.svelte
index e046ad0..4a9d020 100644
--- a/frontend/src/lib/pages/project-tasks.svelte
+++ b/frontend/src/lib/pages/project-tasks.svelte
@@ -12,6 +12,7 @@
   import { Button } from "$lib/components/ui/button";
   import type { Project, Task } from "$lib/types/api";
   import { ACTIVE_STATUSES } from "$lib/types/api";
+  import { createLatestRequestGuard, runLatest } from "$lib/latest-request";
 
   // svelte-ignore a11y_click_events_have_key_events
 
@@ -26,7 +27,7 @@
   let sort = $state("-created_at");
   let offset = $state(0);
   const limit = 50;
-  let requestVersion = 0;
+  const requestGuard = createLatestRequestGuard();
 
   let filterStatuses = $state<string[]>([...ACTIVE_STATUSES]);
   let filterPriorities = $state<string[]>([]);
@@ -59,7 +60,6 @@
 
   function load() {
     if (!slug) return;
-    const version = ++requestVersion;
     loading = true;
     error = "";
 
@@ -69,22 +69,20 @@
       filters.priorities = filterPriorities.join(",");
     if (searchQuery) filters.search = searchQuery;
 
-    Promise.all([getProject(slug), listTasks(filters)])
-      .then(([proj, res]) => {
-        if (version !== requestVersion) return;
+    runLatest(requestGuard, () => Promise.all([getProject(slug), listTasks(filters)]), {
+      onSuccess: ([proj, res]) => {
         project = proj;
         tasks = res.items;
         total = res.total;
         touchProject({ id: proj.id, name: proj.name });
-      })
-      .catch((e) => {
-        if (version !== requestVersion) return;
-        error = e.message || "Failed to load data";
-      })
-      .finally(() => {
-        if (version !== requestVersion) return;
+      },
+      onError: (e) => {
+        error = (e as Error).message || "Failed to load data";
+      },
+      onFinally: () => {
         loading = false;
-      });
+      },
+    });
   }
 
   $effect(load);
@@ -97,12 +95,14 @@
   function handleTaskClick(task: Task) {
     navigate(`/tasks/${task.id}`);
   }
+
+  let initialLoading = $derived(loading && project === null);
 </script>
 
 <div class="mx-auto max-w-7xl space-y-4">
-  {#if loading}
+  {#if initialLoading}
     <p class="text-muted-foreground py-8 text-center">Loading...</p>
-  {:else if error}
+  {:else if error && !project}
     <p class="text-destructive py-8 text-center">{error}</p>
   {:else if project}
     <div class="flex items-center justify-between">
@@ -124,6 +124,9 @@
 
     <div class="grid grid-cols-[1fr_280px] gap-6">
       <div class="min-w-0">
+        {#if loading}
+          <p class="text-muted-foreground py-2 text-center text-sm">Loading...</p>
+        {/if}
         <Card.Root>
           <Card.CardContent class="p-0">
             <TaskTable
diff --git a/frontend/src/lib/pages/projects.svelte b/frontend/src/lib/pages/projects.svelte
index 8a43987..6694b84 100644
--- a/frontend/src/lib/pages/projects.svelte
+++ b/frontend/src/lib/pages/projects.svelte
@@ -13,6 +13,7 @@
   import SearchIcon from "@lucide/svelte/icons/search";
   import XIcon from "@lucide/svelte/icons/x";
   import type { Project } from "$lib/types/api";
+  import { createLatestRequestGuard, runLatest } from "$lib/latest-request";
 
   let { params = {} }: { params?: Record<string, string> } = $props();
 
@@ -25,7 +26,7 @@
   let searchTerm = $state("");
   let debouncedSearch = $state("");
   let searchTimeout: ReturnType<typeof setTimeout> | null = null;
-  let requestVersion = 0;
+  const requestGuard = createLatestRequestGuard();
 
   function handleSearchInput(value: string) {
     searchTerm = value;
@@ -45,24 +46,25 @@
   }
 
   function load() {
-    const version = ++requestVersion;
     loading = true;
     error = "";
-    listProjects(limit, offset, debouncedSearch || undefined)
-      .then((res) => {
-        if (version !== requestVersion) return;
-        projects = res.items;
-        total = res.total;
-        enrichRecentFromProjects(res.items);
-      })
-      .catch((e) => {
-        if (version !== requestVersion) return;
-        error = e.message || "Failed to load projects";
-      })
-      .finally(() => {
-        if (version !== requestVersion) return;
-        loading = false;
-      });
+    runLatest(
+      requestGuard,
+      () => listProjects(limit, offset, debouncedSearch || undefined),
+      {
+        onSuccess: (res) => {
+          projects = res.items;
+          total = res.total;
+          enrichRecentFromProjects(res.items);
+        },
+        onError: (e) => {
+          error = (e as Error).message || "Failed to load projects";
+        },
+        onFinally: () => {
+          loading = false;
+        },
+      },
+    );
   }
 
   $effect(load);

From 3ee80b01d009cf8e527fdab35886ee1e971b6ac7 Mon Sep 17 00:00:00 2001
From: dudina-ma <dudina27maria@gmail.com>
Date: Sat, 11 Jul 2026 22:08:55 +0200
Subject: [PATCH 3/3] [frontend] address review comment

---
 frontend/src/lib/pages/project-tasks.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/lib/pages/project-tasks.svelte b/frontend/src/lib/pages/project-tasks.svelte
index 4a9d020..4b666c1 100644
--- a/frontend/src/lib/pages/project-tasks.svelte
+++ b/frontend/src/lib/pages/project-tasks.svelte
@@ -32,6 +32,7 @@
   let filterStatuses = $state<string[]>([...ACTIVE_STATUSES]);
   let filterPriorities = $state<string[]>([]);
   let searchQuery = $state("");
+  let lastSlug = "";
 
   function toggleStatus(s: string) {
     if (filterStatuses.includes(s)) {
@@ -60,6 +61,10 @@
 
   function load() {
     if (!slug) return;
+    if (slug !== lastSlug) {
+      lastSlug = slug;
+      project = null;
+    }
     loading = true;
     error = "";