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

@@ -0,0 +1,5 @@
+---
+'ui': minor
+---
+
+fix: account page issue

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>

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);

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>

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;