From 5c5dd191011a958f30c669a5b9ed01d9280ee59f Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Tue, 14 Jan 2025 04:41:27 +0900
Subject: [PATCH] feat: add loading ui

---
 .../approve-transaction.spec.tsx                |  1 +
 .../network-fee-setting-item.styles.ts          |  9 ++++++++-
 .../network-fee-setting-item.tsx                | 17 ++++++++++++++++-
 .../network-fee-setting.spec.tsx                |  1 +
 .../network-fee-setting/network-fee-setting.tsx |  3 +++
 .../src/hooks/wallet/use-network-fee.ts         |  7 ++++++-
 6 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx
index 20ac04ea..fbd006af 100644
--- a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx
+++ b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx
@@ -50,6 +50,7 @@ describe('ApproveTransaction Component', () => {
         return;
       },
       useNetworkFeeReturn: {
+        isFetchedPriceTiers: true,
         currentGasPrice: {
           amount: '0.0048',
           denom: 'GNOT',
diff --git a/packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.styles.ts b/packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.styles.ts
index b58b9d4b..1efbae16 100644
--- a/packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.styles.ts
+++ b/packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.styles.ts
@@ -1,8 +1,15 @@
-import { View } from '@components/atoms';
+import { SkeletonBoxStyle, View } from '@components/atoms';
 import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
+export const NetworkFeeItemSkeletonBox = styled(SkeletonBoxStyle)`
+  ${mixins.flex({ align: 'flex-start' })};
+  width: 55px;
+  height: 14px;
+  align-self: center;
+`;
+
 export const NetworkFeeSettingItemWrapper = styled(View)`
   ${mixins.flex({ direction: 'row', align: 'normal', justify: 'space-between' })};
   display: flex;
diff --git a/packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.tsx b/packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.tsx
index f184df0e..280dd1da 100644
--- a/packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.tsx
+++ b/packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.tsx
@@ -1,10 +1,14 @@
 import { NetworkFeeSettingInfo, NetworkFeeSettingType } from '@types';
 import React, { useMemo } from 'react';
 import { TokenBalance } from '../token-balance';
-import { NetworkFeeSettingItemWrapper } from './network-fee-setting-item.styles';
+import {
+  NetworkFeeItemSkeletonBox,
+  NetworkFeeSettingItemWrapper,
+} from './network-fee-setting-item.styles';
 
 export interface NetworkFeeSettingItemProps {
   selected: boolean;
+  isLoading: boolean;
   select: () => void;
   info: NetworkFeeSettingInfo;
 }
@@ -17,6 +21,7 @@ const networkFeeSettingTypeNames: { [key in NetworkFeeSettingType]: string } = {
 
 const NetworkFeeSettingItem: React.FC<NetworkFeeSettingItemProps> = ({
   selected,
+  isLoading,
   info,
   select,
 }) => {
@@ -51,6 +56,16 @@ const NetworkFeeSettingItem: React.FC<NetworkFeeSettingItemProps> = ({
     select();
   };
 
+  if (isLoading) {
+    return (
+      <NetworkFeeSettingItemWrapper className='loading'>
+        <span className='title'>{'Loading...'}</span>
+
+        <NetworkFeeItemSkeletonBox />
+      </NetworkFeeSettingItemWrapper>
+    );
+  }
+
   return (
     <NetworkFeeSettingItemWrapper className={selected ? 'selected' : ''} onClick={onClickItem}>
       <span className='title'>{settingTypeName}</span>
diff --git a/packages/adena-extension/src/components/pages/network-fee-setting/network-fee-setting/network-fee-setting.spec.tsx b/packages/adena-extension/src/components/pages/network-fee-setting/network-fee-setting/network-fee-setting.spec.tsx
index 75787c8a..7efeae18 100644
--- a/packages/adena-extension/src/components/pages/network-fee-setting/network-fee-setting/network-fee-setting.spec.tsx
+++ b/packages/adena-extension/src/components/pages/network-fee-setting/network-fee-setting/network-fee-setting.spec.tsx
@@ -11,6 +11,7 @@ describe('NetworkFeeSetting Component', () => {
   it('NetworkFeeSetting render', () => {
     const args: NetworkFeeSettingProps = {
       gasPriceRatio: '1.5',
+      isFetchedPriceTiers: true,
       setGasPriceRatio: () => {
         return;
       },
diff --git a/packages/adena-extension/src/components/pages/network-fee-setting/network-fee-setting/network-fee-setting.tsx b/packages/adena-extension/src/components/pages/network-fee-setting/network-fee-setting/network-fee-setting.tsx
index fce9a91e..a22e3a81 100644
--- a/packages/adena-extension/src/components/pages/network-fee-setting/network-fee-setting/network-fee-setting.tsx
+++ b/packages/adena-extension/src/components/pages/network-fee-setting/network-fee-setting/network-fee-setting.tsx
@@ -10,6 +10,7 @@ import BigNumber from 'bignumber.js';
 import { NetworkFeeSettingWrapper } from './network-fee-setting.styles';
 
 export interface NetworkFeeSettingProps {
+  isFetchedPriceTiers: boolean;
   changedGasPrice: GasPrice | null;
   networkFeeSettingType: NetworkFeeSettingType;
   setNetworkFeeSetting: (settingInfo: NetworkFeeSettingInfo) => void;
@@ -27,6 +28,7 @@ const settingTypesOfList: NetworkFeeSettingType[] = [
 ];
 
 const NetworkFeeSetting: React.FC<NetworkFeeSettingProps> = ({
+  isFetchedPriceTiers,
   changedGasPrice,
   networkFeeSettingType,
   setNetworkFeeSetting,
@@ -82,6 +84,7 @@ const NetworkFeeSetting: React.FC<NetworkFeeSettingProps> = ({
             <NetworkFeeSettingItem
               key={index}
               selected={isSelected(settingInfo)}
+              isLoading={!isFetchedPriceTiers}
               info={settingInfo}
               select={(): void => setNetworkFeeSetting(settingInfo)}
             />
diff --git a/packages/adena-extension/src/hooks/wallet/use-network-fee.ts b/packages/adena-extension/src/hooks/wallet/use-network-fee.ts
index d258348d..377c9d61 100644
--- a/packages/adena-extension/src/hooks/wallet/use-network-fee.ts
+++ b/packages/adena-extension/src/hooks/wallet/use-network-fee.ts
@@ -8,6 +8,7 @@ import { useGetGasPriceTires } from './transaction-gas/use-get-gas-price';
 import { useGetSingleEstimateGas } from './transaction-gas/use-get-single-estimate-gas';
 
 export interface UseNetworkFeeReturn {
+  isFetchedPriceTiers: boolean;
   currentGasPrice: GasPrice | null;
   currentGasPriceRawAmount: number;
   changedGasPrice: GasPrice | null;
@@ -36,7 +37,10 @@ export const useNetworkFee = (
 
   const { data: gasPriceTiers } = useGetGasPriceTires(gasPriceRatio);
 
-  const { data: estimatedGasPriceTiers } = useGetEstimateGas(document, gasPriceTiers);
+  const { data: estimatedGasPriceTiers, isFetched: isFetchedPriceTiers } = useGetEstimateGas(
+    document,
+    gasPriceTiers,
+  );
 
   const { data: estimatedDefaultGasPrice = null } = useGetSingleEstimateGas(document, {
     enabled: !selectedTier,
@@ -133,6 +137,7 @@ export const useNetworkFee = (
   }, [changedSettingType]);
 
   return {
+    isFetchedPriceTiers,
     currentGasPrice,
     currentGasPriceRawAmount,
     changedGasPrice,