From 34c64809e28aa56acb31ed875e72cb0cb7a829ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Mon, 4 Nov 2024 11:19:52 +0100
Subject: [PATCH] Load issue activity in the router to prevent flickering

---
 src/views/repo/Issue.svelte | 42 ++++++++++++++++++-------------------
 src/views/repo/router.ts    | 13 +++++++++---
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
index bfca2e937..0c33c22f7 100644
--- a/src/views/repo/Issue.svelte
+++ b/src/views/repo/Issue.svelte
@@ -7,7 +7,7 @@
   import type { RepoInfo } from "@bindings/repo/RepoInfo";
 
   import partial from "lodash/partial";
-  import { onMount, tick } from "svelte";
+  import { tick } from "svelte";
 
   import * as roles from "@app/lib/roles";
   import {
@@ -39,11 +39,18 @@
     repo: RepoInfo;
     issue: Issue;
     issues: Issue[];
+    activity: Operation[];
     config: Config;
   }
 
   /* eslint-disable prefer-const */
-  let { repo, issue, issues: initialIssues, config }: Props = $props();
+  let {
+    repo,
+    issue,
+    issues: initialIssues,
+    activity,
+    config,
+  }: Props = $props();
   /* eslint-enable prefer-const */
 
   const issues = $state(initialIssues);
@@ -62,7 +69,6 @@
       topLevelReplyOpen = false;
       editingTitle = false;
       updatedTitle = issue.title;
-      void loadActivity();
     }
   });
 
@@ -85,20 +91,6 @@
       }, []),
   );
 
-  let activity = $state<Operation[]>([]);
-
-  async function loadActivity() {
-    activity = await invoke("activity_by_id", {
-      rid: repo.rid,
-      typeName: "xyz.radicle.issue",
-      id: issue.id,
-    });
-  }
-
-  onMount(() => {
-    void loadActivity();
-  });
-
   async function toggleReply() {
     topLevelReplyOpen = !topLevelReplyOpen;
     if (!topLevelReplyOpen) {
@@ -113,11 +105,17 @@
   }
 
   async function reload() {
-    issue = await invoke("issue_by_id", {
-      rid: repo.rid,
-      id: issue.id,
-    });
-    await loadActivity();
+    [issue, activity] = await Promise.all([
+      invoke<Issue>("issue_by_id", {
+        rid: repo.rid,
+        id: issue.id,
+      }),
+      invoke<Operation[]>("activity_by_id", {
+        rid: repo.rid,
+        typeName: "xyz.radicle.issue",
+        id: issue.id,
+      }),
+    ]);
   }
 
   async function createComment(body: string, embeds: Embed[]) {
diff --git a/src/views/repo/router.ts b/src/views/repo/router.ts
index 305de79c2..983421f58 100644
--- a/src/views/repo/router.ts
+++ b/src/views/repo/router.ts
@@ -1,6 +1,7 @@
 import type { Config } from "@bindings/config/Config";
-import type { PaginatedQuery } from "@bindings/cob/PaginatedQuery";
 import type { Issue } from "@bindings/cob/issue/Issue";
+import type { Operation } from "@bindings/cob/issue/Operation";
+import type { PaginatedQuery } from "@bindings/cob/PaginatedQuery";
 import type { Patch } from "@bindings/cob/patch/Patch";
 import type { RepoInfo } from "@bindings/repo/RepoInfo";
 import type { Revision } from "@bindings/cob/patch/Revision";
@@ -28,6 +29,7 @@ export interface LoadedRepoIssueRoute {
     config: Config;
     issue: Issue;
     issues: Issue[];
+    activity: Operation[];
   };
 }
 
@@ -174,7 +176,7 @@ export async function loadCreateIssue(
 export async function loadIssue(
   route: RepoIssueRoute,
 ): Promise<LoadedRepoIssueRoute> {
-  const [config, repo, issue, issues] = await Promise.all([
+  const [config, repo, issue, activity, issues] = await Promise.all([
     invoke<Config>("config"),
     invoke<RepoInfo>("repo_by_id", {
       rid: route.rid,
@@ -183,6 +185,11 @@ export async function loadIssue(
       rid: route.rid,
       id: route.issue,
     }),
+    invoke<Operation[]>("activity_by_id", {
+      rid: route.rid,
+      typeName: "xyz.radicle.issue",
+      id: route.issue,
+    }),
     invoke<Issue[]>("list_issues", {
       rid: route.rid,
       status: "all",
@@ -191,7 +198,7 @@ export async function loadIssue(
 
   return {
     resource: "repo.issue",
-    params: { repo, config, issue, issues },
+    params: { repo, config, issue, activity, issues },
   };
 }