[WALL] Lubega / WALL-3634 / Fiat deposit blank screen fix (deriv-com#14345)

* fix: fiat deposit loading blank screen

* fix: applied comments

Author: lubega-deriv

packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAuthorize, useCashierFiatAddress } from '@deriv/api-v2';
 import { Loader, WalletsErrorScreen } from '../../../../components';
 import { isServerError } from '../../../../utils/utils';
 import './DepositFiat.scss';
 
 const DepositFiat = () => {
     const { isSuccess: isAuthorizeSuccess } = useAuthorize();
-    const { data: iframeUrl, error: depositError, isError, isLoading, mutate } = useCashierFiatAddress();
+    const { data: iframeUrl, error: depositError, isError, mutate } = useCashierFiatAddress();
+    const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
         if (isAuthorizeSuccess) {
@@ -20,12 +21,14 @@ const DepositFiat = () => {
     return (
         <React.Fragment>
             {isLoading && <Loader />}
-            {iframeUrl && !isLoading && (
+            {iframeUrl && (
                 <iframe
                     className='wallets-deposit-fiat__iframe'
                     data-testid='dt_deposit-fiat-iframe'
                     key={iframeUrl}
+                    onLoad={() => setIsLoading(false)}
                     src={iframeUrl}
+                    style={{ display: isLoading ? 'none' : 'block' }}
                 />
             )}
         </React.Fragment>

packages/wallets/src/features/cashier/modules/DepositFiat/__tests__/DepositFiat.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAuthorize, useCashierFiatAddress } from '@deriv/api-v2';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import DepositFiat from '../DepositFiat';
 
 jest.mock('@deriv/api-v2', () => ({
@@ -10,7 +10,7 @@ jest.mock('@deriv/api-v2', () => ({
 
 describe('DepositFiat', () => {
     beforeEach(() => {
-        (useAuthorize as jest.Mock).mockReturnValueOnce({ isSuccess: true });
+        (useAuthorize as jest.Mock).mockReturnValue({ isSuccess: true });
     });
 
     afterEach(() => {
@@ -24,21 +24,19 @@ describe('DepositFiat', () => {
             data: null,
             error: { error: serverError },
             isError: true,
-            isLoading: false,
             mutate: jest.fn(),
         });
 
         render(<DepositFiat />);
         expect(screen.getByText('Server Error')).toBeInTheDocument();
     });
 
-    it('should render loader while loading', () => {
+    it('should render loader initially', () => {
         (useAuthorize as jest.Mock).mockReturnValueOnce({ isSuccess: false });
         (useCashierFiatAddress as jest.Mock).mockReturnValueOnce({
             data: null,
             error: null,
             isError: false,
-            isLoading: true,
             mutate: jest.fn(),
         });
 
@@ -47,22 +45,21 @@ describe('DepositFiat', () => {
         expect(screen.queryByTestId('dt_deposit-fiat-iframe')).not.toBeInTheDocument();
     });
 
-    it('should render iframe after loading is completed and iframe url is received', async () => {
-        (useCashierFiatAddress as jest.Mock).mockReturnValueOnce({
+    it('should display iframe correctly after onLoad event', () => {
+        (useCashierFiatAddress as jest.Mock).mockReturnValue({
             data: 'https://iframe_url',
             error: null,
             isError: false,
-            isLoading: false,
             mutate: jest.fn(),
         });
 
-        await act(async () => {
-            render(<DepositFiat />);
-            await waitFor(() => {
-                expect(screen.queryByTestId('dt_wallets_loader')).not.toBeInTheDocument();
-            });
-            const iframe = screen.getByTestId('dt_deposit-fiat-iframe');
-            expect(iframe).toHaveAttribute('src', 'https://iframe_url');
-        });
+        render(<DepositFiat />);
+
+        const iframe = screen.getByTestId('dt_deposit-fiat-iframe');
+        expect(iframe).toHaveAttribute('src', 'https://iframe_url');
+        expect(iframe).toHaveStyle({ display: 'none' });
+
+        fireEvent.load(iframe);
+        expect(iframe).toHaveStyle({ display: 'block' });
     });
 });