From 2aa110c9c7c7965bfa468c07797a820387094834 Mon Sep 17 00:00:00 2001
From: Rachel Ho <rachelhoyuenyi@gmail.com>
Date: Wed, 6 Sep 2023 16:58:58 +0800
Subject: [PATCH] feat: accounts transaction loading fix [web-osmosis] (#1300)

## Description

Closes: [BDU-1120](https://forbole.atlassian.net/browse/BDU-1120)

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

_All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues._

I have...

- [ ] ran linting via `yarn lint`
- [ ] wrote tests where necessary
- [ ] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] targeted the correct branch
- [ ] provided a link to the relevant issue or specification
- [ ] reviewed "Files changed" and left comments if necessary
- [ ] confirmed all CI checks have passed
- [ ] added a changeset via [`yarn && yarn
changeset`](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)


[BDU-1120]:
https://forbole.atlassian.net/browse/BDU-1120?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 .changeset/nervous-gorillas-ring.md                         | 5 +++++
 .../account_details/components/transactions/index.tsx       | 6 +++---
 packages/ui/src/screens/account_details/hooks.ts            | 3 ++-
 packages/ui/src/screens/account_details/index.tsx           | 2 +-
 packages/ui/src/screens/account_details/types.ts            | 1 +
 5 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/nervous-gorillas-ring.md

diff --git a/.changeset/nervous-gorillas-ring.md b/.changeset/nervous-gorillas-ring.md
new file mode 100644
index 0000000000..7521d69dd6
--- /dev/null
+++ b/.changeset/nervous-gorillas-ring.md
@@ -0,0 +1,5 @@
+---
+'ui': minor
+---
+
+fix: account page issue
diff --git a/packages/ui/src/screens/account_details/components/transactions/index.tsx b/packages/ui/src/screens/account_details/components/transactions/index.tsx
index 4779314a14..1ff3d56870 100644
--- a/packages/ui/src/screens/account_details/components/transactions/index.tsx
+++ b/packages/ui/src/screens/account_details/components/transactions/index.tsx
@@ -9,7 +9,7 @@ import { readTx } from '@/recoil/settings';
 import { useTransactions } from '@/screens/account_details/components/transactions/hooks';
 import useStyles from '@/screens/account_details/components/transactions/styles';
 
-const Transactions: FC<ComponentDefault> = (props) => {
+const Transactions: FC<ComponentDefault & { loading: boolean }> = (props) => {
   const txListFormat = useRecoilValue(readTx);
   const { classes, cx } = useStyles();
   const { t } = useAppTranslation('validators');
@@ -32,7 +32,7 @@ const Transactions: FC<ComponentDefault> = (props) => {
             isNextPageLoading={state.isNextPageLoading}
             loadNextPage={loadNextPage}
             loadMoreItems={loadMoreItems}
-            isItemLoaded={isItemLoaded}
+            isItemLoaded={isItemLoaded || !props.loading}
           />
         ) : (
           <TransactionsListDetails
@@ -42,7 +42,7 @@ const Transactions: FC<ComponentDefault> = (props) => {
             isNextPageLoading={state.isNextPageLoading}
             loadNextPage={loadNextPage}
             loadMoreItems={loadMoreItems}
-            isItemLoaded={isItemLoaded}
+            isItemLoaded={isItemLoaded || !props.loading}
           />
         )}
       </div>
diff --git a/packages/ui/src/screens/account_details/hooks.ts b/packages/ui/src/screens/account_details/hooks.ts
index 0698be1c90..6a3592468b 100644
--- a/packages/ui/src/screens/account_details/hooks.ts
+++ b/packages/ui/src/screens/account_details/hooks.ts
@@ -31,6 +31,7 @@ const defaultTokenUnit: TokenUnit = {
 
 const initialState: AccountDetailState = {
   loading: true,
+  balanceLoading: true,
   exists: true,
   desmosProfile: null,
   overview: {
@@ -196,7 +197,7 @@ const formatOtherTokens = (data: Data) => {
 // ==========================
 const formatAllBalance = (data: Data) => {
   const stateChange: Partial<AccountDetailState> = {
-    loading: false,
+    balanceLoading: false,
   };
 
   stateChange.rewards = formatRewards(data);
diff --git a/packages/ui/src/screens/account_details/index.tsx b/packages/ui/src/screens/account_details/index.tsx
index 5a68e826dd..6d28e31fd3 100644
--- a/packages/ui/src/screens/account_details/index.tsx
+++ b/packages/ui/src/screens/account_details/index.tsx
@@ -53,7 +53,7 @@ const AccountDetails = () => {
             />
             <OtherTokens className={classes.otherTokens} otherTokens={state.otherTokens} />
             <Staking className={classes.staking} rewards={state.rewards} />
-            <Transactions className={classes.transactions} />
+            <Transactions className={classes.transactions} loading={state.balanceLoading} />
           </span>
         </LoadAndExist>
       </Layout>
diff --git a/packages/ui/src/screens/account_details/types.ts b/packages/ui/src/screens/account_details/types.ts
index ab96035783..9c9bbdeb32 100644
--- a/packages/ui/src/screens/account_details/types.ts
+++ b/packages/ui/src/screens/account_details/types.ts
@@ -25,6 +25,7 @@ export interface RewardsType {
 
 export interface AccountDetailState {
   loading: boolean;
+  balanceLoading: boolean;
   exists: boolean;
   desmosProfile: DesmosProfile | null;
   overview: OverviewType;