NNS1-3485: reporting page to show Busy component while processing req…

…uest (#5984)

# Motivation

While downloading the report we want to avoid users from interacting
with it.
It can be tested in
[here](https://qsgjb-riaaa-aaaaa-aaaga-cai.yhabib-ingress.devenv.dfinity.network/)

# Changes

- Adds busy layover for ReportingNeurons and ReportingTransactions

# Tests

- Unit test to check that the busy functions are called

# Todos

- [ ] Add entry to changelog (if necessary).
Not necessary

frontend/src/lib/components/reporting/ReportingNeuronsButton.svelte

@@ -14,6 +14,7 @@
   import { queryNeurons } from "$lib/api/governance.api";
   import { sortNeuronsByStake } from "$lib/utils/neuron.utils";
   import { getAuthenticatedIdentity } from "$lib/services/auth.services";
+  import { startBusy, stopBusy } from "$lib/stores/busy.store";
 
   let loading = false;
 
@@ -32,6 +33,7 @@
   const exportNeurons = async () => {
     try {
       loading = true;
+      startBusy({ initiator: "reporting-neurons" });
 
       // we are logged in to be able to interact with the button
       const signIdentity = await getAuthenticatedIdentity();
@@ -115,6 +117,7 @@
       }
     } finally {
       loading = false;
+      stopBusy("reporting-neurons");
     }
   };
 </script>

frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte

@@ -23,6 +23,7 @@
   import { queryNeurons } from "$lib/api/governance.api";
   import { sortNeuronsByStake } from "$lib/utils/neuron.utils";
   import { nnsAccountsListStore } from "$lib/derived/accounts-list.derived";
+  import { startBusy, stopBusy } from "$lib/stores/busy.store";
 
   let identity: Identity | null | undefined;
   let swapCanisterAccounts: Set<string>;
@@ -52,6 +53,7 @@
   const exportIcpTransactions = async () => {
     try {
       loading = true;
+      startBusy({ initiator: "reporting-transactions" });
 
       // we are logged in to be able to interact with the button
       const signIdentity = identity as SignIdentity;
@@ -137,6 +139,7 @@
       }
     } finally {
       loading = false;
+      stopBusy("reporting-transactions");
     }
   };
 </script>

frontend/src/lib/stores/busy.store.ts

@@ -51,7 +51,9 @@ export type BusyStateInitiatorType =
   | "import-token-importing"
   | "import-token-removing"
   | "import-token-updating"
-  | "change-neuron-visibility";
+  | "change-neuron-visibility"
+  | "reporting-neurons"
+  | "reporting-transactions";
 
 export interface BusyState {
   initiator: BusyStateInitiatorType;

frontend/src/tests/lib/components/reporting/ReportingNeuronsButton.spec.ts

@@ -10,8 +10,10 @@ import { mockNeuron } from "$tests/mocks/neurons.mock";
 import { ReportingNeuronsButtonPo } from "$tests/page-objects/ReportingNeuronsButon.page-object";
 import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
 import { runResolvedPromises } from "$tests/utils/timers.test-utils";
+import { busyStore } from "@dfinity/gix-components";
 import type { NeuronInfo } from "@dfinity/nns";
 import { render } from "@testing-library/svelte";
+import { get } from "svelte/store";
 
 vi.mock("$lib/api/governance.api");
 
@@ -222,4 +224,22 @@ describe("ReportingNeuronsButton", () => {
 
     expect(await po.isDisabled()).toBe(false);
   });
+
+  it("should show busy page exporting", async () => {
+    const po = renderComponent();
+    expect(get(busyStore)).toEqual([]);
+
+    await po.click();
+
+    expect(get(busyStore)).toEqual([
+      {
+        initiator: "reporting-neurons",
+        text: undefined,
+      },
+    ]);
+
+    await runResolvedPromises();
+
+    expect(get(busyStore)).toEqual([]);
+  });
 });

frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts

@@ -18,8 +18,10 @@ import {
   setAccountsForTesting,
 } from "$tests/utils/accounts.test-utils";
 import { runResolvedPromises } from "$tests/utils/timers.test-utils";
+import { busyStore } from "@dfinity/gix-components";
 import type { NeuronInfo } from "@dfinity/nns";
 import { render } from "@testing-library/svelte";
+import { get } from "svelte/store";
 
 vi.mock("$lib/api/icp-ledger.api");
 vi.mock("$lib/api/governance.api");
@@ -293,4 +295,22 @@ describe("ReportingTransactionsButton", () => {
 
     expect(await po.isDisabled()).toBe(false);
   });
+
+  it("should show busy page while exporting", async () => {
+    const po = renderComponent();
+    expect(get(busyStore)).toEqual([]);
+
+    await po.click();
+
+    expect(get(busyStore)).toEqual([
+      {
+        initiator: "reporting-transactions",
+        text: undefined,
+      },
+    ]);
+
+    await runResolvedPromises();
+
+    expect(get(busyStore)).toEqual([]);
+  });
 });