Merge pull request #124 from thisyahlen-deriv/thisyahlen/fix-glitch

chore: remove loaders for static content and fix glitch

package.json

@@ -14,7 +14,7 @@
         "prepare": "husky install"
     },
     "dependencies": {
-        "@deriv-com/api-hooks": "^0.1.7",
+        "@deriv-com/api-hooks": "^0.1.9",
         "@deriv-com/analytics": "~1.4.13",
         "@deriv-com/ui": "1.12.19",
         "@deriv-com/utils": "^0.0.11",

src/components/CFDSection/CFDContent/CFDContent.tsx

@@ -1,20 +1,10 @@
 import { CTraderList, DxtradePlatformList, MT5PlatformsList } from '@cfd/components';
-import { useAuthData } from '@deriv-com/api-hooks';
 
-import { TradingAppCardLoader } from '@/components';
 import { useRegulationFlags } from '@/hooks';
 
 export const CFDContent = () => {
     const { regulationFlags } = useRegulationFlags();
-    const { isSuccess: isRegulationAccessible, isEU } = regulationFlags;
-    const { isAuthorized } = useAuthData();
-
-    if (!isRegulationAccessible && isAuthorized)
-        return (
-            <div className='pt-16 lg:pt-24'>
-                <TradingAppCardLoader />
-            </div>
-        );
+    const { isEU } = regulationFlags;
 
     return (
         <div className='pt-16 space-y-16 lg:space-y-24 lg:pt-24'>

src/components/CFDSection/CFDContent/__tests__/CFDContent.spec.tsx

@@ -19,10 +19,6 @@ jest.mock('@cfd/components', () => ({
     DxtradePlatformList: () => <div data-testid='dxtrade-platform-list' />,
 }));
 
-jest.mock('@/components', () => ({
-    TradingAppCardLoader: () => <div data-testid='trading-app-card-loader' />,
-}));
-
 describe('CFDContent', () => {
     beforeEach(() => {
         jest.clearAllMocks();
@@ -112,20 +108,4 @@ describe('CFDContent', () => {
 
         expect(screen.queryByTestId('ctrader-list')).not.toBeInTheDocument();
     });
-
-    it('should render TradingAppCardLoader when isSuccess is false', () => {
-        (useRegulationFlags as jest.Mock).mockReturnValue({
-            regulationFlags: {
-                isSuccess: false,
-            },
-        });
-
-        (useAuthData as jest.Mock).mockReturnValue({
-            isAuthorized: true,
-        });
-
-        render(<CFDContent />);
-
-        expect(screen.getByTestId('trading-app-card-loader')).toBeInTheDocument();
-    });
 });

src/components/CFDSection/CFDHeading/CFDHeading.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuthData } from '@deriv-com/api-hooks';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 
-import { StaticLink, TitleDescriptionLoader } from '@/components';
+import { StaticLink } from '@/components';
 import { useRegulationFlags } from '@/hooks';
 
 const CompareAccountsButton = () => {
@@ -32,11 +32,6 @@ const CompareAccountsButton = () => {
 
 const CFDHeading = () => {
     const { isDesktop } = useDevice();
-    const { regulationFlags } = useRegulationFlags();
-    const { isSuccess } = regulationFlags;
-    const { isAuthorized } = useAuthData();
-
-    if (!isSuccess && isAuthorized) return <TitleDescriptionLoader />;
 
     return (
         <div className='flex flex-col'>

src/components/CFDSection/CFDHeading/__tests__/CFDHeading.spec.tsx

@@ -52,22 +52,6 @@ describe('CFDHeading', () => {
         expect(screen.getByText(/Compare Accounts/i)).toBeInTheDocument();
     });
 
-    it('renders the TitleDescriptionLoader when conditions are met', () => {
-        (useAuthData as jest.Mock).mockReturnValue({
-            isAuthorized: true,
-        });
-
-        (useRegulationFlags as jest.Mock).mockReturnValue({
-            regulationFlags: {
-                isSuccess: false,
-            },
-        });
-
-        render(<CFDHeading />);
-
-        expect(screen.queryByText(/CFDs/i)).not.toBeInTheDocument();
-    });
-
     it('should not render the CompareAccountsButton when isAuthorized is false', () => {
         (useAuthData as jest.Mock).mockReturnValue({
             isAuthorized: false,

src/components/Loaders/CurrencySwitcherLoader/CurrencySwitcherLoader.tsx

@@ -1,9 +1,9 @@
 export const CurrencySwitcherLoader = () => (
-    <div className='flex items-center justify-between border-solid gap-16 h-[72px] p-16 rounded-default border-sm border-system-light-active-background w-full lg:w-auto'>
+    <div className='flex items-center justify-between border-solid gap-16 h-[72px] p-16 rounded-default border-1 border-system-light-active-background w-full lg:w-auto'>
         <div className='w-40 h-40 rounded-full animate-pulse bg-solid-slate-100' />
         <div className='space-y-10 grow'>
-            <div className='h-2 animate-pulse bg-solid-slate-100 w-50 rounded-xs' />
-            <div className='animate-pulse bg-solid-slate-100 w-[100px] h-2 rounded-xs' />
+            <div className='h-8 animate-pulse bg-solid-slate-100 w-50 rounded-xs' />
+            <div className='animate-pulse bg-solid-slate-100 w-[100px] h-12 rounded-xs' />
         </div>
     </div>
 );

src/components/OptionsAndMultipliersSection/OptionsAndMultipliersContent/OptionsAndMultipliersContent.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useAuthData } from '@deriv-com/api-hooks';
 import { Button, useDevice } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 
-import { TradingAccountCard, TradingAccountCardContent, TradingAppCardLoader } from '@/components';
+import { TradingAccountCard, TradingAccountCardContent } from '@/components';
 import { optionsAndMultipliersContent } from '@/constants';
 import { getUrlBinaryBot, getUrlDerivTrader, getUrlSmartTrader } from '@/helpers';
 import { useActiveDerivTradingAccount, useRegulationFlags } from '@/hooks';
@@ -101,22 +100,14 @@ export const OptionsAndMultipliersContent = () => {
     const { isDesktop } = useDevice();
     const { data } = useActiveDerivTradingAccount();
     const { regulationFlags } = useRegulationFlags();
-    const { isEU, isSuccess: isRegulationAccessible } = regulationFlags;
-    const { isAuthorized } = useAuthData();
+    const { isEU } = regulationFlags;
 
     const getoptionsAndMultipliersContent = optionsAndMultipliersContent(isEU ?? false);
 
     const filteredContent = isEU
         ? getoptionsAndMultipliersContent.filter(account => account.title === 'Deriv Trader')
         : getoptionsAndMultipliersContent;
 
-    if (!isRegulationAccessible && isAuthorized)
-        return (
-            <div className='pt-40'>
-                <TradingAppCardLoader />
-            </div>
-        );
-
     return (
         <div className='grid w-full grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-x-24 lg:gap-y-4'>
             {filteredContent.map(account => {

src/components/OptionsAndMultipliersSection/OptionsAndMultipliersHeading/OptionsAndMultipliersHeading.tsx

@@ -1,7 +1,6 @@
-import { useAuthData } from '@deriv-com/api-hooks';
 import { Text } from '@deriv-com/ui';
 
-import { CurrencySwitcher, StaticLink, TitleDescriptionLoader } from '@/components';
+import { CurrencySwitcher, StaticLink } from '@/components';
 import { useRegulationFlags } from '@/hooks';
 
 const getDescription = (isEU: boolean) => {
@@ -29,15 +28,12 @@ const getDescription = (isEU: boolean) => {
  */
 export const OptionsAndMultipliersHeading = () => {
     const { regulationFlags } = useRegulationFlags();
-    const { isEU, isSuccess: isRegulationAccessible } = regulationFlags;
-    const { isAuthorized } = useAuthData();
+    const { isEU } = regulationFlags;
 
     const title = isEU ? 'Multipliers' : 'Options & multipliers';
 
     const description = getDescription(isEU);
 
-    if (!isRegulationAccessible && isAuthorized) return <TitleDescriptionLoader />;
-
     return (
         <div className='flex flex-col items-start justify-between gap-16 lg:flex-row lg:gap-48'>
             <div className='gap-2 lg:flex lg:flex-col items-start'>

src/pages/homepage/homepage.tsx

@@ -18,6 +18,7 @@ import { Modals } from '@/modals/Modals';
 export const Homepage = () => {
     const { isDesktop } = useDevice();
     const { isAuthorized } = useAuthData();
+
     const { regulationFlags } = useRegulationFlags();
     const { hasActiveDerivAccount } = regulationFlags;
     const { data: activeTrading } = useActiveDerivTradingAccount();