diff --git a/packages/wallets/src/App.tsx b/packages/wallets/src/App.tsx
index 41793dc31d1b..bd56d16fc119 100644
--- a/packages/wallets/src/App.tsx
+++ b/packages/wallets/src/App.tsx
@@ -1,11 +1,11 @@
 import React, { lazy, useMemo, useState } from 'react';
 import { APIProvider } from '@deriv/api-v2';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
-import { Loader } from '@deriv-com/ui';
 import { ModalProvider } from './components/ModalProvider';
 import useLanguage from './hooks/useLanguage';
 import AppContent from './AppContent';
 import WalletsAuthProvider from './AuthProvider';
+import { WalletLoader } from './components';
 import { TLanguageType } from './types';
 import './styles/fonts.scss';
 import './index.scss';
@@ -47,7 +47,7 @@ const App: React.FC<TProps> = ({
         <APIProvider standalone>
             <WalletsAuthProvider logout={logout}>
                 <TranslationProvider defaultLang={defaultLanguage} i18nInstance={i18nInstance}>
-                    <React.Suspense fallback={<Loader />}>
+                    <React.Suspense fallback={<WalletLoader />}>
                         <ModalProvider>
                             {!isWalletsOnboardingTourGuideVisible && Notifications && <Notifications />}
                             <AppContent
@@ -57,7 +57,7 @@ const App: React.FC<TProps> = ({
                         </ModalProvider>
                     </React.Suspense>
                     {isWalletsOnboardingTourGuideVisible && (
-                        <React.Suspense fallback={<Loader />}>
+                        <React.Suspense fallback={<WalletLoader />}>
                             <LazyWalletTourGuide
                                 onWalletsOnboardingTourGuideCloseHandler={onWalletsOnboardingTourGuideCloseHandler}
                             />
diff --git a/packages/wallets/src/components/Base/WalletLoader/WalletLoader.scss b/packages/wallets/src/components/Base/WalletLoader/WalletLoader.scss
new file mode 100644
index 000000000000..3a5de582c6a0
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletLoader/WalletLoader.scss
@@ -0,0 +1,53 @@
+/** @define barspinner */
+.wallets-barspinner {
+    margin: auto;
+    width: 6rem;
+    height: 2rem;
+    white-space: nowrap;
+
+    &__rect {
+        margin: 0.4rem;
+        border-radius: 20px;
+        height: 40%;
+        width: 0.6rem;
+        display: inline-block;
+        @include createBarspinnerAnimation(5, 1.2s, 0.1);
+    }
+}
+
+@keyframes sk-stretchdelay {
+    0%,
+    40%,
+    100% {
+        transform: scaleY(1);
+    }
+    20% {
+        transform: scaleY(2);
+    }
+}
+
+/** @define initial-loader */
+.wallets-initial-loader {
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    display: flex;
+    background: transparent;
+
+    &--fullscreen {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &__barspinner {
+        margin: 5rem auto;
+
+        &--rect {
+            background-color: var(--brand-secondary);
+        }
+    }
+}
diff --git a/packages/wallets/src/components/Base/WalletLoader/WalletLoader.tsx b/packages/wallets/src/components/Base/WalletLoader/WalletLoader.tsx
new file mode 100644
index 000000000000..65856b570bf4
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletLoader/WalletLoader.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+import './WalletLoader.scss';
+
+type TWalletLoaderProps = {
+    className?: string;
+    isFullScreen?: boolean;
+};
+
+const WalletLoader: React.FC<TWalletLoaderProps> = ({ className, isFullScreen = true }) => {
+    return (
+        <div
+            className={classNames(
+                'wallets-initial-loader',
+                {
+                    'wallets-initial-loader--fullscreen': isFullScreen,
+                },
+                className
+            )}
+            data-testid='dt_initial_loader'
+        >
+            <div className={classNames('wallets-initial-loader__barspinner', 'wallets-barspinner')}>
+                {Array.from(new Array(5)).map((_, idx) => (
+                    <div
+                        className={`wallets-initial-loader__barspinner--rect wallets-barspinner__rect wallets-barspinner__rect--${
+                            idx + 1
+                        } rect${idx + 1}`}
+                        key={idx}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default WalletLoader;
diff --git a/packages/wallets/src/components/Base/WalletLoader/index.ts b/packages/wallets/src/components/Base/WalletLoader/index.ts
new file mode 100644
index 000000000000..dc77ca8c4d9c
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletLoader/index.ts
@@ -0,0 +1 @@
+export { default as WalletLoader } from './WalletLoader';
diff --git a/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx b/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
index 4e496bf32f15..48e876478f00 100644
--- a/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
+++ b/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from 'react';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../WalletLoader';
 import { WalletTextFieldProps } from '../WalletTextField/WalletTextField';
 
 export interface WalletPasswordFieldProps extends WalletTextFieldProps {
@@ -16,7 +16,7 @@ const WalletPasswordFieldLazyContainer = lazy(
 ) as React.FC<WalletPasswordFieldProps>;
 
 const WalletPasswordFieldLazy: React.FC<WalletPasswordFieldProps> = props => (
-    <Suspense fallback={<Loader isFullScreen={false} />}>
+    <Suspense fallback={<WalletLoader isFullScreen={false} />}>
         <WalletPasswordFieldLazyContainer {...props} />
     </Suspense>
 );
diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts
index feb198794077..a4b165bec6e7 100644
--- a/packages/wallets/src/components/Base/index.ts
+++ b/packages/wallets/src/components/Base/index.ts
@@ -9,5 +9,6 @@ export * from './WalletButtonGroup';
 export * from './WalletClipboard';
 export * from './WalletDialog';
 export * from './WalletLink';
+export * from './WalletLoader';
 export * from './WalletPasswordFieldLazy';
 export * from './WalletTextField';
diff --git a/packages/wallets/src/features/cashier/WalletCashier.tsx b/packages/wallets/src/features/cashier/WalletCashier.tsx
index 66e3066325a0..1720b15adcb8 100644
--- a/packages/wallets/src/features/cashier/WalletCashier.tsx
+++ b/packages/wallets/src/features/cashier/WalletCashier.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../components';
 import { WalletCashierContent, WalletCashierHeader } from './components';
 import { CashierScrollContext } from './context';
 import './WalletCashier.scss';
@@ -21,7 +21,7 @@ const WalletCashier = () => {
         [onCashierScroll]
     );
 
-    if (isLoading) return <Loader />;
+    if (isLoading) return <WalletLoader />;
 
     return (
         <div className='wallets-cashier'>
diff --git a/packages/wallets/src/features/cashier/__tests__/WalletCashier.spec.tsx b/packages/wallets/src/features/cashier/__tests__/WalletCashier.spec.tsx
index 49ff8c0b2b8d..60ae44e79154 100644
--- a/packages/wallets/src/features/cashier/__tests__/WalletCashier.spec.tsx
+++ b/packages/wallets/src/features/cashier/__tests__/WalletCashier.spec.tsx
@@ -8,8 +8,9 @@ jest.mock('@deriv/api-v2', () => ({
     useActiveWalletAccount: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../components', () => ({
+    ...jest.requireActual('../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../components/', () => ({
diff --git a/packages/wallets/src/features/cashier/flows/WalletDeposit/WalletDeposit.tsx b/packages/wallets/src/features/cashier/flows/WalletDeposit/WalletDeposit.tsx
index 1e8629e34822..686cff4d8752 100644
--- a/packages/wallets/src/features/cashier/flows/WalletDeposit/WalletDeposit.tsx
+++ b/packages/wallets/src/features/cashier/flows/WalletDeposit/WalletDeposit.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { DepositCryptoModule, DepositFiatModule } from '../../modules';
 
 const WalletDeposit = () => {
     const { data: activeWallet } = useActiveWalletAccount();
 
-    if (!activeWallet?.currency_config) return <Loader />;
+    if (!activeWallet?.currency_config) return <WalletLoader />;
 
     const isCryptoProvider = activeWallet.currency_config.platform.cashier.includes('crypto');
 
diff --git a/packages/wallets/src/features/cashier/flows/WalletTransfer/WalletTransfer.tsx b/packages/wallets/src/features/cashier/flows/WalletTransfer/WalletTransfer.tsx
index 08bd462a197c..4f9389084147 100644
--- a/packages/wallets/src/features/cashier/flows/WalletTransfer/WalletTransfer.tsx
+++ b/packages/wallets/src/features/cashier/flows/WalletTransfer/WalletTransfer.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useTransferBetweenAccounts } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { TransferModule } from '../../modules';
 import { TransferNotAvailable } from '../../screens/TransferNotAvailable';
 
@@ -13,7 +13,7 @@ const WalletTransfer = () => {
         requestTransferAccounts();
     }, [requestTransferAccounts]);
 
-    if (isTransferAccountsLoading || !data?.accounts) return <Loader />;
+    if (isTransferAccountsLoading || !data?.accounts) return <WalletLoader />;
 
     return (
         <TransferNotAvailable accounts={data.accounts}>
diff --git a/packages/wallets/src/features/cashier/flows/WalletTransfer/__tests__/WalletTransfer.spec.tsx b/packages/wallets/src/features/cashier/flows/WalletTransfer/__tests__/WalletTransfer.spec.tsx
index 4ec6c9ab8b1a..1d8e39457718 100644
--- a/packages/wallets/src/features/cashier/flows/WalletTransfer/__tests__/WalletTransfer.spec.tsx
+++ b/packages/wallets/src/features/cashier/flows/WalletTransfer/__tests__/WalletTransfer.spec.tsx
@@ -4,8 +4,9 @@ import { render, screen } from '@testing-library/react';
 import { CashierLocked } from '../../../modules';
 import WalletTransfer from '../WalletTransfer';
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../../modules', () => ({
diff --git a/packages/wallets/src/features/cashier/flows/WalletWithdrawal/WalletWithdrawal.tsx b/packages/wallets/src/features/cashier/flows/WalletWithdrawal/WalletWithdrawal.tsx
index ec9fe1b084b3..60ef48e62f3e 100644
--- a/packages/wallets/src/features/cashier/flows/WalletWithdrawal/WalletWithdrawal.tsx
+++ b/packages/wallets/src/features/cashier/flows/WalletWithdrawal/WalletWithdrawal.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useActiveWalletAccount, useAuthorize } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import useAllBalanceSubscription from '../../../../hooks/useAllBalanceSubscription';
 import { WithdrawalCryptoModule, WithdrawalFiatModule, WithdrawalVerificationModule } from '../../modules';
 import { WithdrawalNoBalance } from '../../screens';
@@ -42,7 +42,7 @@ const WalletWithdrawal = () => {
     }, [activeWallet?.loginid, switchAccount]);
 
     if (!activeWallet || isBalanceLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (balanceData && !isBalanceLoading && balanceData[activeWallet?.loginid ?? 'USD'].balance <= 0) {
diff --git a/packages/wallets/src/features/cashier/flows/WalletWithdrawal/__tests__/WalletWithdrawal.spec.tsx b/packages/wallets/src/features/cashier/flows/WalletWithdrawal/__tests__/WalletWithdrawal.spec.tsx
index b2c2ab11be5a..f979a8c57938 100644
--- a/packages/wallets/src/features/cashier/flows/WalletWithdrawal/__tests__/WalletWithdrawal.spec.tsx
+++ b/packages/wallets/src/features/cashier/flows/WalletWithdrawal/__tests__/WalletWithdrawal.spec.tsx
@@ -5,6 +5,11 @@ import useAllBalanceSubscription from '../../../../../hooks/useAllBalanceSubscri
 import { CashierLocked, WithdrawalLocked } from '../../../modules';
 import WalletWithdrawal from '../WalletWithdrawal';
 
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
+}));
+
 jest.mock('../../../modules', () => ({
     ...jest.requireActual('../../../modules'),
     CashierLocked: jest.fn(({ children }) => <>{children}</>),
@@ -32,10 +37,6 @@ jest.mock('../../../screens', () => ({
     WithdrawalNoBalance: jest.fn(() => <div>WithdrawalNoBalance</div>),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
-}));
-
 const mockSwitchAccount = jest.fn();
 jest.mock('@deriv/api-v2', () => ({
     ...jest.requireActual('@deriv/api-v2'),
diff --git a/packages/wallets/src/features/cashier/modules/CashierLocked/CashierLocked.tsx b/packages/wallets/src/features/cashier/modules/CashierLocked/CashierLocked.tsx
index 83d757cbab99..493a07747cea 100644
--- a/packages/wallets/src/features/cashier/modules/CashierLocked/CashierLocked.tsx
+++ b/packages/wallets/src/features/cashier/modules/CashierLocked/CashierLocked.tsx
@@ -8,7 +8,8 @@ import {
     usePOI,
 } from '@deriv/api-v2';
 import { Localize } from '@deriv-com/translations';
-import { ActionScreen, Loader } from '@deriv-com/ui';
+import { ActionScreen } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import getCashierLockedDesc, { getSystemMaintenanceContent } from './CashierLockedContent';
 import './CashierLocked.scss';
 
@@ -79,7 +80,7 @@ const CashierLocked: React.FC<TCashierLockedProps> = ({ children, module }) => {
     });
 
     if (isLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (isSystemMaintenance && systemMaintenanceContent) {
diff --git a/packages/wallets/src/features/cashier/modules/CashierLocked/__tests__/CashierLocked.spec.tsx b/packages/wallets/src/features/cashier/modules/CashierLocked/__tests__/CashierLocked.spec.tsx
index e2ea95cd90e2..5f897c3ee45b 100644
--- a/packages/wallets/src/features/cashier/modules/CashierLocked/__tests__/CashierLocked.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/CashierLocked/__tests__/CashierLocked.spec.tsx
@@ -20,9 +20,9 @@ jest.mock('@deriv/api-v2', () => ({
     usePOI: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../CashierLockedContent', () => ({
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx
index b3e5c01d53c4..e67f1965f473 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useActiveWalletAccount, useCurrencyConfig, useDepositCryptoAddress } from '@deriv/api-v2';
-import { Divider, Loader, useDevice } from '@deriv-com/ui';
+import { Divider, useDevice } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { isServerError } from '../../../../utils/utils';
 import { DepositErrorScreen } from '../../screens';
 import { TransactionStatus } from '../TransactionStatus';
@@ -21,7 +22,7 @@ const DepositCrypto = () => {
     const isTUSDT = activeWallet?.currency && getConfig(activeWallet.currency)?.is_tUSDT;
     const isOnrampAvailable = activeWallet?.currency_config && activeWallet.currency_config.platform.ramp.length > 0;
 
-    if (isLoading) return <Loader />;
+    if (isLoading) return <WalletLoader />;
 
     if (isServerError(depositCryptoError)) {
         return <DepositErrorScreen error={depositCryptoError} />;
diff --git a/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.tsx b/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.tsx
index 9566700e2385..e1747be7ec0a 100644
--- a/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useAuthorize, useCashierFiatAddress } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { isServerError } from '../../../../utils/utils';
 import { DepositErrorScreen } from '../../screens';
 import './DepositFiat.scss';
@@ -22,7 +22,7 @@ const DepositFiat: React.FC = () => {
         }
     }, [isAuthorizeSuccess, mutateDepositFiat]);
 
-    if (isDepositFiatLoading) return <Loader />;
+    if (isDepositFiatLoading) return <WalletLoader />;
 
     if (isServerError(depositFiatError)) {
         return <DepositErrorScreen error={depositFiatError} />;
@@ -30,7 +30,7 @@ const DepositFiat: React.FC = () => {
 
     return (
         <React.Fragment>
-            {isIframeLoading && <Loader />}
+            {isIframeLoading && <WalletLoader />}
             {iframeUrl && (
                 <iframe
                     className='wallets-deposit-fiat__iframe'
diff --git a/packages/wallets/src/features/cashier/modules/DepositFiat/__tests__/DepositFiat.spec.tsx b/packages/wallets/src/features/cashier/modules/DepositFiat/__tests__/DepositFiat.spec.tsx
index 47aa72efe477..bf24638a8c00 100644
--- a/packages/wallets/src/features/cashier/modules/DepositFiat/__tests__/DepositFiat.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositFiat/__tests__/DepositFiat.spec.tsx
@@ -8,8 +8,9 @@ jest.mock('@deriv/api-v2', () => ({
     useCashierFiatAddress: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../../screens', () => ({
diff --git a/packages/wallets/src/features/cashier/modules/DepositLocked/DepositLocked.tsx b/packages/wallets/src/features/cashier/modules/DepositLocked/DepositLocked.tsx
index b8aaf5fdcbd8..37c34372ccc6 100644
--- a/packages/wallets/src/features/cashier/modules/DepositLocked/DepositLocked.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositLocked/DepositLocked.tsx
@@ -8,7 +8,8 @@ import {
     useSettings,
 } from '@deriv/api-v2';
 import { Localize } from '@deriv-com/translations';
-import { ActionScreen, Loader } from '@deriv-com/ui';
+import { ActionScreen } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import getDepositLockedDesc from './DepositLockedContent';
 import './DepositLocked.scss';
 
@@ -42,7 +43,7 @@ const DepositLocked: React.FC<React.PropsWithChildren> = ({ children }) => {
     const tradingExperienceNotComplete = accountStatus?.is_trading_experience_not_complete;
 
     if (isAccountStatusLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (isDepositLocked) {
diff --git a/packages/wallets/src/features/cashier/modules/DepositLocked/__tests__/DepositLocked.spec.tsx b/packages/wallets/src/features/cashier/modules/DepositLocked/__tests__/DepositLocked.spec.tsx
index 7ee9dab40bc2..6f536776a896 100644
--- a/packages/wallets/src/features/cashier/modules/DepositLocked/__tests__/DepositLocked.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositLocked/__tests__/DepositLocked.spec.tsx
@@ -21,9 +21,9 @@ jest.mock('@deriv/api-v2', () => ({
     useWebsiteStatus: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../DepositLockedContent', () => ({
diff --git a/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx b/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx
index ace82b5f99ac..af2203fbb5b0 100644
--- a/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx
+++ b/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx
@@ -3,7 +3,8 @@ import { useHistory } from 'react-router-dom';
 import { useActiveWalletAccount, useMutation } from '@deriv/api-v2';
 import { DerivLightDemoResetBalanceIcon, DerivLightDemoResetBalanceSuccessfulIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { ActionScreen, Button, Loader } from '@deriv-com/ui';
+import { ActionScreen, Button } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import useAllBalanceSubscription from '../../../../hooks/useAllBalanceSubscription';
 
 const ResetBalance = () => {
@@ -21,7 +22,7 @@ const ResetBalance = () => {
     const isResetBalanceAvailable = balanceData && balanceData?.[activeWallet?.loginid ?? '']?.balance < 10000;
 
     if (isBalanceLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (isResetBalanceSuccess) {
diff --git a/packages/wallets/src/features/cashier/modules/ResetBalance/__test__/ResetBalance.spec.tsx b/packages/wallets/src/features/cashier/modules/ResetBalance/__test__/ResetBalance.spec.tsx
index db3bc0bffb0c..de7123ffc831 100644
--- a/packages/wallets/src/features/cashier/modules/ResetBalance/__test__/ResetBalance.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/ResetBalance/__test__/ResetBalance.spec.tsx
@@ -10,9 +10,9 @@ jest.mock('@deriv/api-v2', () => ({
     useMutation: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('react-router-dom', () => ({
diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx
index 5753205323ba..ee19a45cfc48 100644
--- a/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx
+++ b/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx
@@ -2,7 +2,8 @@ import React, { useCallback, useEffect } from 'react';
 import { useActiveWalletAccount, useCryptoTransactions } from '@deriv/api-v2';
 import { LegacyWarningIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
-import { Divider, Loader, Text } from '@deriv-com/ui';
+import { Divider, Text } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { THooks } from '../../../../types';
 import { TransactionStatusError } from './components/TransactionStatusError';
 import { TransactionStatusSuccess } from './components/TransactionStatusSuccess';
@@ -56,7 +57,7 @@ const TransactionStatus: React.FC<TTransactionStatus> = ({ transactionType }) =>
             <div className='wallets-transaction-status__body'>
                 {isLoading && (
                     <div className='wallets-transaction-status__loader'>
-                        <Loader />
+                        <WalletLoader />
                     </div>
                 )}
                 {isError && !isLoading && <TransactionStatusError refresh={refresh} />}
diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/__tests__/TransactionStatus.spec.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/__tests__/TransactionStatus.spec.tsx
index 59a6130bb5d7..a58bdac36c40 100644
--- a/packages/wallets/src/features/cashier/modules/TransactionStatus/__tests__/TransactionStatus.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/TransactionStatus/__tests__/TransactionStatus.spec.tsx
@@ -20,9 +20,9 @@ jest.mock('@deriv/api-v2', () => ({
     })),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 describe('TransactionStatus component', () => {
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx
index 1810f76b728b..f03c1ba56422 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect } from 'react';
 import { useActiveWalletAccount, useAllAccountsList, useInfiniteTransactions } from '@deriv/api-v2';
 import { TSocketRequestPayload } from '@deriv/api-v2/types';
-import { Loader, Text } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
+import { WalletLoader } from '../../../../../../components';
 import { useCashierScroll } from '../../../../context';
 import { TransactionsCompletedRow } from '../TransactionsCompletedRow';
 import { TransactionsNoDataState } from '../TransactionsNoDataState';
@@ -52,7 +53,7 @@ const TransactionsCompleted: React.FC<TProps> = ({ filter }) => {
         setFilter(filter);
     }, [filter]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    if (!wallet || (!transactions && (isFetching || isLoading))) return <Loader />;
+    if (!wallet || (!transactions && (isFetching || isLoading))) return <WalletLoader />;
 
     if (!transactions) return <TransactionsNoDataState />;
 
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/__tests__/TransactionsCompleted.spec.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/__tests__/TransactionsCompleted.spec.tsx
index 91d6fc003f2d..5dbc5598d937 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/__tests__/TransactionsCompleted.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/__tests__/TransactionsCompleted.spec.tsx
@@ -12,9 +12,9 @@ jest.mock('@deriv/api-v2', () => ({
     })),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../../../components', () => ({
+    ...jest.requireActual('../../../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../TransactionsCompletedRow', () => ({
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/TransactionsCompletedDemoResetBalance.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/TransactionsCompletedDemoResetBalance.tsx
index 227af50ec6f6..e2a4bea4c209 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/TransactionsCompletedDemoResetBalance.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/TransactionsCompletedDemoResetBalance.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import { useActiveWalletAccount, useAllAccountsList, useTransactions } from '@deriv/api-v2';
-import { Loader, Text } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
+import { WalletLoader } from '../../../../../../components';
 import { TransactionsCompletedRow } from '../TransactionsCompletedRow';
 import { TransactionsNoDataState } from '../TransactionsNoDataState';
 import { TransactionsTable } from '../TransactionsTable';
@@ -33,7 +34,7 @@ const TransactionsCompletedDemoResetBalance: React.FC = () => {
         (a, b) => (b.transaction_time ?? 0) - (a.transaction_time ?? 0)
     );
 
-    if (!wallet || isLoading) return <Loader />;
+    if (!wallet || isLoading) return <WalletLoader />;
 
     if (!resetBalanceTransactions.length) return <TransactionsNoDataState />;
 
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/__tests__/TransactionsCompletedDemoResetBalance.spec.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/__tests__/TransactionsCompletedDemoResetBalance.spec.tsx
index a99a357f38b8..769b729ad6a7 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/__tests__/TransactionsCompletedDemoResetBalance.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/__tests__/TransactionsCompletedDemoResetBalance.spec.tsx
@@ -13,9 +13,9 @@ jest.mock('@deriv/api-v2', () => ({
     })),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../../../components', () => ({
+    ...jest.requireActual('../../../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../TransactionsCompletedRow', () => ({
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx
index e53b39dd4c19..7e552b9e3864 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import { useCryptoTransactions } from '@deriv/api-v2';
-import { Loader, Text } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
+import { WalletLoader } from '../../../../../../components';
 import { TransactionsNoDataState } from '../TransactionsNoDataState';
 import { TransactionsPendingRow } from '../TransactionsPendingRow';
 import { TransactionsTable } from '../TransactionsTable';
@@ -23,7 +24,7 @@ const TransactionsPending: React.FC<TProps> = ({ filter = 'all' }) => {
         return () => unsubscribe();
     }, [filter, resetData, subscribe, unsubscribe]);
 
-    if (!isSubscribed || isLoading) return <Loader />;
+    if (!isSubscribed || isLoading) return <WalletLoader />;
 
     if (!transactions) return <TransactionsNoDataState />;
 
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/__tests__/TransactionsPending.spec.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/__tests__/TransactionsPending.spec.tsx
index 92d2738e15d1..b096852a4032 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/__tests__/TransactionsPending.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/__tests__/TransactionsPending.spec.tsx
@@ -18,9 +18,9 @@ jest.mock('@deriv/api-v2', () => ({
     })),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../../../components', () => ({
+    ...jest.requireActual('../../../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../TransactionsNoDataState', () => ({
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx
index 35c44716a0db..99ef4cf8b255 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useRef } from 'react';
 import { Formik } from 'formik';
 import { Localize } from '@deriv-com/translations';
-import { Button, Loader, useDevice } from '@deriv-com/ui';
+import { Button, useDevice } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../../../components';
 import { useTransfer } from '../../provider';
 import type { TInitialTransferFormValues } from '../../types';
 import { TransferFormAmountInput } from '../TransferFormAmountInput';
@@ -28,7 +29,8 @@ const TransferForm = () => {
         [requestTransferBetweenAccounts]
     );
 
-    if (isLoading) return <Loader />;
+    if (isLoading) return <WalletLoader />;
+
     return (
         <div className='wallets-transfer'>
             <Formik initialValues={initialValues} onSubmit={onSubmit}>
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx
index 53f5a333db9a..286c8db2a35d 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx
@@ -9,6 +9,11 @@ import TransferForm from '../TransferForm';
 const mockAccounts = ['CR1', 'CR2'];
 let mockFormikValues: unknown;
 
+jest.mock('../../../../../../../components', () => ({
+    ...jest.requireActual('../../../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
+}));
+
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: jest.fn(() => ({})),
@@ -59,7 +64,7 @@ describe('<TransferForm />', () => {
 
         render(<TransferForm />, { wrapper });
 
-        expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument();
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
     });
 
     it('should test that transfer button is disabled when fromAmount is 0', async () => {
diff --git a/packages/wallets/src/features/cashier/modules/TransferLocked/TransferLocked.tsx b/packages/wallets/src/features/cashier/modules/TransferLocked/TransferLocked.tsx
index 46323e066e60..d4f61952ff4d 100644
--- a/packages/wallets/src/features/cashier/modules/TransferLocked/TransferLocked.tsx
+++ b/packages/wallets/src/features/cashier/modules/TransferLocked/TransferLocked.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useAccountStatus, useActiveWalletAccount, useCashierValidation } from '@deriv/api-v2';
 import { Localize } from '@deriv-com/translations';
-import { ActionScreen, Loader, Text } from '@deriv-com/ui';
-import { WalletLink } from '../../../../components';
+import { ActionScreen, Text } from '@deriv-com/ui';
+import { WalletLink, WalletLoader } from '../../../../components';
 import './TransferLocked.scss';
 
 type TCashierLockedProps = {
@@ -24,7 +24,7 @@ const TransferLocked: React.FC<TCashierLockedProps> = ({ children }) => {
         askFinancialRiskApproval;
 
     if (isAccountStatusLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (isMFTransferLocked) {
diff --git a/packages/wallets/src/features/cashier/modules/TransferLocked/__tests__/TransferLocked.spec.tsx b/packages/wallets/src/features/cashier/modules/TransferLocked/__tests__/TransferLocked.spec.tsx
index 6e45c76a741b..e6c2011746a5 100644
--- a/packages/wallets/src/features/cashier/modules/TransferLocked/__tests__/TransferLocked.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/TransferLocked/__tests__/TransferLocked.spec.tsx
@@ -9,9 +9,9 @@ jest.mock('@deriv/api-v2', () => ({
     useCashierValidation: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 const mockActiveWalletData = { currency: 'USD', loginid: 'MF42069' };
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx
index 7a2a533c39b2..175fe666bd88 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Localize } from '@deriv-com/translations';
-import { Loader, Text } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { isServerError } from '../../../../utils/utils';
 import { WithdrawalErrorScreen } from '../../screens';
 import { TransactionStatus } from '../TransactionStatus';
@@ -29,7 +30,7 @@ const WithdrawalCrypto: React.FC<Pick<TWithdrawalCryptoProps, 'setResendEmail' |
         setError(undefined);
     };
 
-    if (isLoading) return <Loader />;
+    if (isLoading) return <WalletLoader />;
 
     if (isServerError(error)) {
         return <WithdrawalErrorScreen error={error} resetError={resetError} setResendEmail={setResendEmail} />;
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalFiat/WithdrawalFiat.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalFiat/WithdrawalFiat.tsx
index 857a0bb8cd67..c1a35d89833a 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalFiat/WithdrawalFiat.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalFiat/WithdrawalFiat.tsx
@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes, useEffect, useState } from 'react';
 import { useCashierFiatAddress } from '@deriv/api-v2';
 import { TSocketError } from '@deriv/api-v2/types';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { isServerError } from '../../../../utils/utils';
 import { WithdrawalErrorScreen } from '../../screens';
 import './WithdrawalFiat.scss';
@@ -32,7 +32,7 @@ const WithdrawalFiat: React.FC<WithdrawalFiatProps> = ({ setResendEmail, setVeri
         setError(undefined);
     };
 
-    if (isWithdrawalFiatLoading) return <Loader />;
+    if (isWithdrawalFiatLoading) return <WalletLoader />;
 
     if (error) {
         return <WithdrawalErrorScreen error={error} resetError={resetError} setResendEmail={setResendEmail} />;
@@ -40,7 +40,7 @@ const WithdrawalFiat: React.FC<WithdrawalFiatProps> = ({ setResendEmail, setVeri
 
     return (
         <React.Fragment>
-            {isIframeLoading && <Loader />}
+            {isIframeLoading && <WalletLoader />}
             {iframeUrl && (
                 <iframe
                     className='wallets-withdrawal-fiat__iframe'
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalFiat/__tests__/WithdrawalFiat.spec.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalFiat/__tests__/WithdrawalFiat.spec.tsx
index 0be7d322067b..f36d48c91d58 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalFiat/__tests__/WithdrawalFiat.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalFiat/__tests__/WithdrawalFiat.spec.tsx
@@ -7,8 +7,9 @@ jest.mock('@deriv/api-v2', () => ({
     useCashierFiatAddress: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../../screens', () => ({
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalLocked/WithdrawalLocked.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalLocked/WithdrawalLocked.tsx
index fd44de763ad6..3335c7cc8c1a 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalLocked/WithdrawalLocked.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalLocked/WithdrawalLocked.tsx
@@ -10,7 +10,8 @@ import {
     usePOI,
 } from '@deriv/api-v2';
 import { Localize } from '@deriv-com/translations';
-import { ActionScreen, Loader } from '@deriv-com/ui';
+import { ActionScreen } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import getWithdrawalLockedDesc, { getWithdrawalLimitReachedDesc } from './WithdrawalLockedContent';
 import './WithdrawalLocked.scss';
 
@@ -44,7 +45,7 @@ const WithdrawalLocked: React.FC<React.PropsWithChildren> = ({ children }) => {
 
     const remainder = accountLimits?.remainder;
     const fractionalDigits = activeWallet?.currency_config?.fractional_digits
-        ? Math.pow(10, -activeWallet.currency_config.fractional_digits)
+        ? 10 ** -activeWallet.currency_config.fractional_digits
         : 0.01;
     const minimumWithdrawal = isCryptoProvider ? cryptoConfig?.minimum_withdrawal : fractionalDigits;
 
@@ -56,7 +57,7 @@ const WithdrawalLocked: React.FC<React.PropsWithChildren> = ({ children }) => {
     const isLoading = isCurrencyConfigLoading || isAccountStatusLoading;
 
     if (isLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (withdrawalLimitReached) {
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalLocked/__tests__/WithdrawalLocked.spec.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalLocked/__tests__/WithdrawalLocked.spec.tsx
index eb1513b8af60..afaa6e2f49bd 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalLocked/__tests__/WithdrawalLocked.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalLocked/__tests__/WithdrawalLocked.spec.tsx
@@ -23,9 +23,9 @@ jest.mock('@deriv/api-v2', () => ({
     usePOI: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../WithdrawalLockedContent', () => ({
diff --git a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx
index aee382a3a2c0..c764680278fd 100644
--- a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useCtraderAccountsList } from '@deriv/api-v2';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Loader, useDevice } from '@deriv-com/ui';
-import { ModalStepWrapper, ModalWrapper } from '../../../../components';
+import { useDevice } from '@deriv-com/ui';
+import { ModalStepWrapper, ModalWrapper, WalletLoader } from '../../../../components';
 import { useModal } from '../../../../components/ModalProvider';
 import { THooks } from '../../../../types';
 import { PlatformDetails } from '../../constants';
@@ -24,7 +24,7 @@ const CTraderSuccessModal = ({ createdAccount, isDemo, walletCurrencyType }: TCT
     const cTraderAccount = cTraderAccounts?.find(account => account.login);
     const isLoading = !cTraderAccounts || isCtraderAccountsListLoading || !cTraderAccount;
 
-    if (isLoading) return <Loader />;
+    if (isLoading) return <WalletLoader />;
 
     const description = isDemo
         ? localize('Practise trading with {{ctraderBalance}} virtual funds.', {
diff --git a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/__tests__/CtraderSuccessModal.spec.tsx b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/__tests__/CtraderSuccessModal.spec.tsx
index 16b6cc0b22d5..f61d0c3f0e58 100644
--- a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/__tests__/CtraderSuccessModal.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/__tests__/CtraderSuccessModal.spec.tsx
@@ -10,7 +10,6 @@ jest.mock('@deriv/api-v2', () => ({
 }));
 
 jest.mock('@deriv-com/ui', () => ({
-    Loader: () => <div>Loading...</div>,
     useDevice: jest.fn(),
 }));
 
@@ -42,6 +41,7 @@ jest.mock('../../../../../components', () => ({
         </div>
     ),
     ModalWrapper: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../components', () => ({
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
index e707b8924d82..5af6cbebf13b 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -9,9 +9,9 @@ import {
     useVerifyEmail,
 } from '@deriv/api-v2';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Button, Loader, useDevice } from '@deriv-com/ui';
+import { Button, useDevice } from '@deriv-com/ui';
 import { SentEmailContent } from '../../../../components';
-import { ModalStepWrapper, ModalWrapper } from '../../../../components/Base';
+import { ModalStepWrapper, ModalWrapper, WalletLoader } from '../../../../components/Base';
 import { validatePassword } from '../../../../components/Base/WalletPasswordField/WalletPasswordField';
 import { useModal } from '../../../../components/ModalProvider';
 import { WalletSuccessChangeMT5Password } from '../../../../components/WalletsChangeMT5Password';
@@ -275,7 +275,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
     ]);
 
     const PasswordComponent = useMemo(() => {
-        if (isLoading) return <Loader />;
+        if (isLoading) return <WalletLoader />;
 
         if (isMT5PasswordNotSet && platform !== CFD_PLATFORMS.MT5)
             return (
@@ -368,7 +368,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
     ]);
 
     if (accountStatusLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (emailVerificationStatus === 'error') {
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
index eb2c099505f1..461e83d8d881 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
@@ -30,7 +30,6 @@ jest.mock('@deriv/api-v2', () => ({
 jest.mock('../../../../../components/ModalProvider');
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
     useDevice: jest.fn(() => ({ isDesktop: true })),
 }));
 
@@ -51,6 +50,7 @@ jest.mock('../../../../../components/Base', () => ({
         </div>
     ),
     ModalWrapper: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../../../../components', () => ({
diff --git a/packages/wallets/src/routes/Router.tsx b/packages/wallets/src/routes/Router.tsx
index 8f096400485e..4613fc546469 100644
--- a/packages/wallets/src/routes/Router.tsx
+++ b/packages/wallets/src/routes/Router.tsx
@@ -1,6 +1,6 @@
 import React, { lazy } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../components';
 import { Page404 } from '../components/Page404';
 
 const LazyWalletsListingRoute = lazy(
@@ -78,7 +78,7 @@ const Router: React.FC = () => {
                 exact
                 path={'/compare-accounts'}
                 render={() => (
-                    <React.Suspense fallback={<Loader />}>
+                    <React.Suspense fallback={<WalletLoader />}>
                         <LazyCompareAccountsRoute />
                     </React.Suspense>
                 )}
@@ -86,7 +86,7 @@ const Router: React.FC = () => {
             <Route
                 path={'/wallet'}
                 render={() => (
-                    <React.Suspense fallback={<Loader />}>
+                    <React.Suspense fallback={<WalletLoader />}>
                         <LazyCashierModalRoute />
                     </React.Suspense>
                 )}
@@ -95,7 +95,7 @@ const Router: React.FC = () => {
                 exact
                 path={'/'}
                 render={() => (
-                    <React.Suspense fallback={<Loader />}>
+                    <React.Suspense fallback={<WalletLoader />}>
                         <LazyWalletsListingRoute />
                     </React.Suspense>
                 )}