chore: add loading data

DistributedCollective · Sep 28, 2023 · 0699e69 · 0699e69
1 parent a250afd
commit 0699e69
Show file tree

Hide file tree

Showing 35 changed files with 46 additions and 21 deletions.
diff --git a/...rganisms/BorrowHistory/components/CloseWithDepositLoanFrame/CloseWithDepositLoanFrame.tsx b/...rganisms/BorrowHistory/components/CloseWithDepositLoanFrame/CloseWithDepositLoanFrame.tsx
@@ -186,6 +186,7 @@ export const CloseWithDepositLoanFrame: FC<PropsWithChildren> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="close-with-deposits-table"
         />
         <Pagination

diff --git a/...pp/3_organisms/BorrowHistory/components/CloseWithSwapLoanFrame/CloseWithSwapLoanFrame.tsx b/...pp/3_organisms/BorrowHistory/components/CloseWithSwapLoanFrame/CloseWithSwapLoanFrame.tsx
@@ -184,6 +184,7 @@ export const CloseWithSwapLoanFrame: FC<PropsWithChildren> = ({ children }) => {
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="close-with-swaps-table"
         />
         <Pagination

diff --git a/...ganisms/BorrowHistory/components/CollateralSurplusFrame/CollateralSurplusHistoryFrame.tsx b/...ganisms/BorrowHistory/components/CollateralSurplusFrame/CollateralSurplusHistoryFrame.tsx
@@ -168,6 +168,7 @@ export const CollateralSurplusHistoryFrame: FC<PropsWithChildren> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="surplus-withdrawals-table"
         />
         <Pagination

diff --git a/...anisms/BorrowHistory/components/DepositCollateralLoanFrame/DepositCollateralLoanFrame.tsx b/...anisms/BorrowHistory/components/DepositCollateralLoanFrame/DepositCollateralLoanFrame.tsx
@@ -175,6 +175,7 @@ export const DepositCollateralLoanFrame: FC<PropsWithChildren> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="deposit-collaterals-table"
         />
         <Pagination

diff --git a/...rc/app/3_organisms/BorrowHistory/components/LiquidationLoanFrame/LiquidationLoanFrame.tsx b/...rc/app/3_organisms/BorrowHistory/components/LiquidationLoanFrame/LiquidationLoanFrame.tsx
@@ -186,6 +186,7 @@ export const LiquidationLoanFrame: FC<PropsWithChildren> = ({ children }) => {
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="close-with-deposits-table"
         />
         <Pagination

diff --git a/...rontend/src/app/3_organisms/BorrowHistory/components/NewLoanFrame/NewLoanHistoryFrame.tsx b/...rontend/src/app/3_organisms/BorrowHistory/components/NewLoanFrame/NewLoanHistoryFrame.tsx
@@ -259,6 +259,7 @@ export const NewLoanHistoryFrame: FC<PropsWithChildren> = ({ children }) => {
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="new-loans-table"
         />
         <Pagination

diff --git a/...c/app/3_organisms/BorrowHistory/components/RolloverLoanFrame/RolloverLoanHistoryFrame.tsx b/...c/app/3_organisms/BorrowHistory/components/RolloverLoanFrame/RolloverLoanHistoryFrame.tsx
@@ -189,6 +189,7 @@ export const RolloverLoanHistoryFrame: FC<PropsWithChildren> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="rollover-loans-table"
         />
         <Pagination

diff --git a/.../3_organisms/BorrowHistory/components/TransactionHistoryFrame/TransactionHistoryFrame.tsx b/.../3_organisms/BorrowHistory/components/TransactionHistoryFrame/TransactionHistoryFrame.tsx
@@ -563,6 +563,7 @@ export const TransactionHistoryFrame: FC<PropsWithChildren> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={noDataLabel}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="transaction-history-table"
         />
         <Pagination

diff --git a/...rsionsHistoryFrame/components/MyntConversionsHistoryFrame/MyntConversionsHistoryFrame.tsx b/...rsionsHistoryFrame/components/MyntConversionsHistoryFrame/MyntConversionsHistoryFrame.tsx
@@ -133,6 +133,7 @@ export const MyntConversionsHistoryFrame: React.FC<PropsWithChildren> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="mynt-conversions-history-table"
         />
       }

diff --git a/...rsionsHistoryFrame/components/ZeroConversionsHistoryFrame/ZeroConversionsHistoryFrame.tsx b/...rsionsHistoryFrame/components/ZeroConversionsHistoryFrame/ZeroConversionsHistoryFrame.tsx
@@ -130,6 +130,7 @@ export const ZeroConversionsHistoryFrame: React.FC<PropsWithChildren> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="zero-conversions-history-table"
         />
       }

diff --git a/...c/app/3_organisms/EarnHistoryFrame/components/LendingHistoryFrame/LendingHistoryFrame.tsx b/...c/app/3_organisms/EarnHistoryFrame/components/LendingHistoryFrame/LendingHistoryFrame.tsx
@@ -134,6 +134,7 @@ export const LendingHistoryFrame: FC<PropsWithChildren> = ({ children }) => {
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="earn-history-table"
         />
       }

diff --git a/...nisms/EarnHistoryFrame/components/StabilityPoolHistoryFrame/StabilityPoolHistoryFrame.tsx b/...nisms/EarnHistoryFrame/components/StabilityPoolHistoryFrame/StabilityPoolHistoryFrame.tsx
@@ -344,6 +344,7 @@ export const StabilityPoolHistoryFrame: FC<PropsWithChildren> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={noDataLabel}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="stability-pool-history-table"
         />
         <Pagination

diff --git a/apps/frontend/src/app/3_organisms/FundingHistoryFrame/FundingHistoryFrame.tsx b/apps/frontend/src/app/3_organisms/FundingHistoryFrame/FundingHistoryFrame.tsx
@@ -176,6 +176,7 @@ export const FundingHistoryFrame: FC = () => {
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="funding-history-table"
         />
         <Pagination

diff --git a/apps/frontend/src/app/3_organisms/RedemptionsHistoryFrame/RedemptionsHistoryFrame.tsx b/apps/frontend/src/app/3_organisms/RedemptionsHistoryFrame/RedemptionsHistoryFrame.tsx
@@ -256,6 +256,7 @@ export const RedemptionsHistoryFrame: FC = () => {
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="redemption-history-table"
         />
         <Pagination

diff --git a/...rc/app/3_organisms/RewardHistory/components/RewardsEarnedHistory/RewardsEarnedHistory.tsx b/...rc/app/3_organisms/RewardHistory/components/RewardsEarnedHistory/RewardsEarnedHistory.tsx
@@ -166,6 +166,7 @@ export const RewardsEarnedHistory: FC<RewardHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="subsidy-history-reward-table"
         />
         <Pagination

diff --git a/...rc/app/3_organisms/RewardHistory/components/StabilityPoolRewards/StabilityPoolRewards.tsx b/...rc/app/3_organisms/RewardHistory/components/StabilityPoolRewards/StabilityPoolRewards.tsx
@@ -216,6 +216,7 @@ export const StabilityPoolRewards: FC<RewardHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="reward-history-table"
         />
         <Pagination

diff --git a/...pp/3_organisms/RewardHistory/components/StabilityPoolSubsidies/StabilityPoolSubsidies.tsx b/...pp/3_organisms/RewardHistory/components/StabilityPoolSubsidies/StabilityPoolSubsidies.tsx
@@ -228,6 +228,7 @@ export const StabilityPoolSubsidies: FC<RewardHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="subsidy-history-reward-table"
         />
         <Pagination

diff --git a/apps/frontend/src/app/3_organisms/RewardHistory/components/VestingRewards/VestingRewards.tsx b/apps/frontend/src/app/3_organisms/RewardHistory/components/VestingRewards/VestingRewards.tsx
@@ -149,6 +149,7 @@ export const VestingRewards: FC<RewardHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="vesting-reward-history-table"
         />
         <Pagination

diff --git a/...rganisms/StakingHistoryFrame/components/StakingDelegateChanges/StakingDelegateChanges.tsx b/...rganisms/StakingHistoryFrame/components/StakingDelegateChanges/StakingDelegateChanges.tsx
@@ -157,6 +157,7 @@ export const StakingDelegateChanges: FC<StakingHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="staking-delegate-change-history-table"
         />
         <Pagination

diff --git a/...anisms/StakingHistoryFrame/components/StakingExtendedDuration/StakingExtendedDuration.tsx b/...anisms/StakingHistoryFrame/components/StakingExtendedDuration/StakingExtendedDuration.tsx
@@ -160,6 +160,7 @@ export const StakingExtendedDuration: FC<StakingHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="staking-extended-duration-history-table"
         />
         <Pagination

diff --git a/...tend/src/app/3_organisms/StakingHistoryFrame/components/StakingHistory/StakingHistory.tsx b/...tend/src/app/3_organisms/StakingHistoryFrame/components/StakingHistory/StakingHistory.tsx
@@ -159,6 +159,7 @@ export const StakingHistory: FC<StakingHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="staking-history-table"
         />
         <Pagination

diff --git a/.../src/app/3_organisms/StakingHistoryFrame/components/StakingWithdraws/StakingWithdraws.tsx b/.../src/app/3_organisms/StakingHistoryFrame/components/StakingWithdraws/StakingWithdraws.tsx
@@ -159,6 +159,7 @@ export const StakingWithdraws: FC<StakingHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="staking-withdrawns-history-table"
         />
         <Pagination

diff --git a/...rganisms/StakingHistoryFrame/components/VestingDelegateChanges/VestingDelegateChanges.tsx b/...rganisms/StakingHistoryFrame/components/VestingDelegateChanges/VestingDelegateChanges.tsx
@@ -156,6 +156,7 @@ export const VestingDelegateChanges: FC<StakingHistoryProps> = ({
           isLoading={loading}
           className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="staking-delegate-change-history-table"
         />
         <Pagination

diff --git a/apps/frontend/src/app/5_pages/BorrowPage/components/BorrowAssetsTable/BorrowAssetsTable.tsx b/apps/frontend/src/app/5_pages/BorrowPage/components/BorrowAssetsTable/BorrowAssetsTable.tsx
@@ -26,6 +26,7 @@ export const BorrowAssetsTable: FC = () => (
         rowTitle={generateRowTitle}
         className="text-gray-10 lg:px-6 lg:py-4 text-xs"
         noData={t(translations.common.tables.noData)}
+        loadingData={t(translations.common.tables.loading)}
         dataAttribute="borrow-assets-table"
       />
     </div>

diff --git a/apps/frontend/src/app/5_pages/BorrowPage/components/OpenLoansTable/OpenLoansTable.tsx b/apps/frontend/src/app/5_pages/BorrowPage/components/OpenLoansTable/OpenLoansTable.tsx
@@ -29,6 +29,7 @@ export const OpenLoansTable: FC<OpenLoansTableProps> = ({ loans, loading }) => (
         rowTitle={generateRowTitle}
         className="text-gray-10 lg:px-6 lg:py-4 text-xs"
         noData={t(translations.common.tables.noData)}
+        loadingData={t(translations.common.tables.loading)}
         isLoading={loading}
         dataAttribute="borrow-assets-table"
       />

diff --git a/apps/frontend/src/app/5_pages/LendPage/components/LendFrame/LendFrame.tsx b/apps/frontend/src/app/5_pages/LendPage/components/LendFrame/LendFrame.tsx
@@ -28,6 +28,7 @@ export const LendFrame: FC = () => {
           rowTitle={generateRowTitle}
           className="text-gray-10 lg:px-6 lg:py-4 text-xs"
           noData={t(translations.common.tables.noData)}
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="lend-frame-table"
           expandedContent={pool => <LendFrameDetails pool={pool} />}
           expandedClassNames="border border-gray-70 border-t-0"

diff --git a/apps/frontend/src/app/5_pages/RewardsPage/components/StabilityPool/StabilityPool.tsx b/apps/frontend/src/app/5_pages/RewardsPage/components/StabilityPool/StabilityPool.tsx
@@ -225,6 +225,7 @@ export const StabilityPool: FC = () => {
                 : t(translations.rewardPage.stabilityPool.notConnected)}
             </span>
           }
+          loadingData={t(translations.common.tables.loading)}
           rowTitle={row => (
             <div className="flex flex-col items-start gap-1">
               <Paragraph className="text-gray-40 font-medium">

diff --git a/apps/frontend/src/app/5_pages/RewardsPage/components/Staking/Staking.tsx b/apps/frontend/src/app/5_pages/RewardsPage/components/Staking/Staking.tsx
@@ -98,6 +98,7 @@ export const Staking: FC = () => {
                 : t(translations.rewardPage.stabilityPool.notConnected)}
             </span>
           }
+          loadingData={t(translations.common.tables.loading)}
           rowTitle={row => (
             <div className="flex flex-col items-start gap-1 font-medium">
               <Paragraph className="text-gray-40">{row.type}</Paragraph>

diff --git a/apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/Vesting.tsx b/apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/Vesting.tsx
@@ -53,6 +53,7 @@ export const Vesting: FC = () => {
               : t(translations.rewardPage.vesting.table.notConnected)}
           </span>
         }
+        loadingData={t(translations.common.tables.loading)}
         isLoading={loading}
         dataAttribute="funding-history-table"
         rowTitle={generateRowTitle}

diff --git a/apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/StakesFrame.tsx b/apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/StakesFrame.tsx
@@ -75,6 +75,7 @@ export const StakesFrame: FC = () => {
                 : t(translations.stakePage.table.notConnected)}
             </span>
           }
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="stakes-table"
         />
         {account && (

diff --git a/apps/frontend/src/app/5_pages/StakePage/components/VestingStakesFrame/VestingStakesFrame.tsx b/apps/frontend/src/app/5_pages/StakePage/components/VestingStakesFrame/VestingStakesFrame.tsx
@@ -73,6 +73,7 @@ export const VestingStakesFrame: FC = () => {
                 : t(translations.stakePage.table.notConnected)}
             </span>
           }
+          loadingData={t(translations.common.tables.loading)}
           dataAttribute="vesting-stakes-table"
         />
         {account && (

diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
@@ -34,7 +34,8 @@
                 "noDataToExport": "No data to export"
             },
             "noData": "No data available",
-            "noDataWithFilters": "No data with the current filters"
+            "noDataWithFilters": "No data with the current filters",
+            "loading": "Loading data..."
         },
         "max": "max",
         "amount": "Amount",

diff --git a/packages/ui/src/2_molecules/Table/Table.types.ts b/packages/ui/src/2_molecules/Table/Table.types.ts
@@ -23,6 +23,7 @@ export type TableProps<RowType extends RowObject> = {
   rowKey?: (row: RowType) => number | string;
   rowTitle?: (row: RowType) => ReactNode;
   noData?: ReactNode;
+  loadingData?: ReactNode;
   onRowClick?: (row: RowType) => void;
   dataAttribute?: string;
   isClickable?: boolean;

diff --git a/packages/ui/src/2_molecules/Table/components/TableDesktop/TableDesktop.tsx b/packages/ui/src/2_molecules/Table/components/TableDesktop/TableDesktop.tsx
@@ -24,6 +24,7 @@ export const TableDesktop = <RowType extends RowObject>({
   rows,
   rowKey,
   noData,
+  loadingData,
   onRowClick,
   dataAttribute,
   isClickable,
@@ -143,19 +144,13 @@ export const TableDesktop = <RowType extends RowObject>({
               ))}
             </tr>
 
-            {isLoading ? (
-              <tr className={rowStyles.row}>
-                <td className={styles.loading} colSpan={999}>
-                  Loading data…
-                </td>
-              </tr>
-            ) : (
-              <tr className={rowStyles.row}>
-                <td className={styles.noData} colSpan={999}>
-                  {noData ? noData : 'No data'}
-                </td>
-              </tr>
-            )}
+            <tr className={rowStyles.row}>
+              <td className={styles.loading} colSpan={999}>
+                {isLoading
+                  ? loadingData || 'Loading data…'
+                  : noData || 'No data'}
+              </td>
+            </tr>
           </>
         )}
       </tbody>

diff --git a/packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx b/packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx
@@ -14,6 +14,7 @@ export const TableMobile = <RowType extends RowObject>({
   onRowClick,
   dataAttribute,
   noData,
+  loadingData,
   isLoading,
   className,
   expandedContent,
@@ -36,13 +37,9 @@ export const TableMobile = <RowType extends RowObject>({
       ))}
 
     {(!rows || rows.length === 0) && (
-      <>
-        {isLoading ? (
-          <div className={styles.loading}>Loading data…</div>
-        ) : (
-          <div className={styles.noData}>{noData ? noData : 'No data'}</div>
-        )}
-      </>
+      <div className={isLoading ? styles.loading : styles.noData}>
+        {isLoading ? loadingData || 'Loading data…' : noData || 'No data'}
+      </div>
     )}
   </div>
 );