From fe9ca29aa7934e09cb3669db38348f9b022b5c0f Mon Sep 17 00:00:00 2001
From: Panteleymonchuk <panteleymonchuk@gmail.com>
Date: Wed, 18 Dec 2024 16:03:18 +0200
Subject: [PATCH] feat(core): enhance validator's loading state with skeleton
 components

---
 apps/core/src/components/Validator.tsx          | 17 ++++++++++++++++-
 .../Staking/views/EnterAmountDialogLayout.tsx   |  4 +---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/core/src/components/Validator.tsx b/apps/core/src/components/Validator.tsx
index 59d6cacd3b8..38cf4745f8f 100644
--- a/apps/core/src/components/Validator.tsx
+++ b/apps/core/src/components/Validator.tsx
@@ -12,6 +12,8 @@ import {
     CardType,
     Badge,
     BadgeType,
+    ImageShape,
+    Skeleton,
 } from '@iota/apps-ui-kit';
 import { formatAddress } from '@iota/iota-sdk/utils';
 
@@ -50,7 +52,20 @@ export function Validator({
     });
 
     if (isPendingValidators) {
-        return <div className="flex items-center justify-center">...</div>;
+        return (
+            <Card>
+                <CardImage shape={ImageShape.Rounded}>
+                    <Skeleton widthClass="w-10" heightClass="h-10" />
+                </CardImage>
+                <div className="flex flex-col gap-y-xs">
+                    <Skeleton widthClass="w-40" heightClass="h-3.5" />
+                    <Skeleton widthClass="w-32" heightClass="h-3" hasSecondaryColors />
+                </div>
+                <div className="ml-auto flex flex-col gap-y-xs">
+                    <Skeleton widthClass="w-20" heightClass="h-3.5" />
+                </div>
+            </Card>
+        );
     }
     // for inactive validators, show the epoch number
     const fallBackText = activeEpoch
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx
index 9ec233b1838..26cef542124 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { useFormatCoin, useStakeTxnInfo } from '@iota/core';
+import { useFormatCoin, useStakeTxnInfo, Validator } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import {
     Button,
@@ -20,8 +20,6 @@ import {
 import { Field, type FieldProps, useFormikContext } from 'formik';
 import { Exclamation, Loader } from '@iota/ui-icons';
 import { useIotaClientQuery } from '@iota/dapp-kit';
-
-import { Validator } from './Validator';
 import { StakedInfo } from './StakedInfo';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';