feat(portfolio): add a stake loading state field to ProjectTable (#6201)

# Motivation

We want users to have cue that their tokens are loading. The `UserToken`
value already has this functionality, represented by `UserTokenLoading`.
The goal is to implement a similar feature for the `ProjectTable`.

In this initial iteration, I'm adding a new property instead of changing
the existing `stake` property to minimize the impacted area.

Relates to #5199

# Changes

- Added a new property `isStakeLoading`, which is `true` while the
neurons have not yet loaded.

# Tests

- Updated tests to check the new value when neurons have not loaded yet

# Todos

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

frontend/src/lib/types/staking.ts

@@ -14,6 +14,7 @@ export type TableProject = {
   stakeInUsd: number | undefined;
   availableMaturity: bigint | undefined;
   stakedMaturity: bigint | undefined;
+  isStakeLoading?: boolean;
 };
 
 export type ProjectsTableColumn = ResponsiveTableColumn<TableProject>;

frontend/src/lib/utils/staking.utils.ts

@@ -111,6 +111,7 @@ const getNeuronAggregateInfo = ({
   stake: TokenAmountV2 | UnavailableTokenAmount;
   availableMaturity: bigint | undefined;
   stakedMaturity: bigint | undefined;
+  isStakeLoading: boolean;
 } => {
   if (!isSignedIn) {
     const stake = new UnavailableTokenAmount(token);
@@ -119,6 +120,7 @@ const getNeuronAggregateInfo = ({
       stake,
       availableMaturity: undefined,
       stakedMaturity: undefined,
+      isStakeLoading: false,
     };
   }
   const { neuronCount, stake, availableMaturity, stakedMaturity } =
@@ -135,6 +137,7 @@ const getNeuronAggregateInfo = ({
         }),
     availableMaturity,
     stakedMaturity,
+    isStakeLoading: isNullish(stake),
   };
 };
 
@@ -157,14 +160,19 @@ export const getTableProjects = ({
         ? ICPToken
         : // If the universe is an SNS universe then the summary is non-nullish.
           asNonNullish(universe.summary).token;
-    const { neuronCount, stake, availableMaturity, stakedMaturity } =
-      getNeuronAggregateInfo({
-        isSignedIn,
-        universe,
-        token,
-        nnsNeurons,
-        snsNeurons,
-      });
+    const {
+      neuronCount,
+      stake,
+      availableMaturity,
+      stakedMaturity,
+      isStakeLoading,
+    } = getNeuronAggregateInfo({
+      isSignedIn,
+      universe,
+      token,
+      nnsNeurons,
+      snsNeurons,
+    });
     const rowHref =
       nonNullish(neuronCount) && neuronCount > 0
         ? buildNeuronsUrl({ universe: universe.canisterId })
@@ -194,6 +202,7 @@ export const getTableProjects = ({
       stakeInUsd,
       availableMaturity,
       stakedMaturity,
+      isStakeLoading,
     };
   });
 };

frontend/src/tests/lib/utils/staking.utils.spec.ts

@@ -63,6 +63,7 @@ describe("staking.utils", () => {
       tokenSymbol: "ICP",
       availableMaturity: 0n,
       stakedMaturity: 0n,
+      isStakeLoading: false,
     };
 
     const defaultExpectedSnsTableProject = {
@@ -80,6 +81,7 @@ describe("staking.utils", () => {
       tokenSymbol: snsTokenSymbol,
       availableMaturity: 0n,
       stakedMaturity: 0n,
+      isStakeLoading: false,
     };
 
     const nnsNeuronWithStake = {
@@ -602,6 +604,7 @@ describe("staking.utils", () => {
           stakeInUsd: undefined,
           availableMaturity: undefined,
           stakedMaturity: undefined,
+          isStakeLoading: true,
         },
         {
           ...defaultExpectedSnsTableProject,
@@ -610,6 +613,7 @@ describe("staking.utils", () => {
           stakeInUsd: undefined,
           availableMaturity: undefined,
           stakedMaturity: undefined,
+          isStakeLoading: true,
         },
       ]);
     });