Client side routing to improve the navigation times for "View Deposit…

… History" (#8375)

changelog/fix-6527-improved-navigation-time

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Used client side navigation to improve the UX for "View Deposit History"

client/components/deposits-overview/index.tsx

@@ -10,6 +10,7 @@ import {
 	CardHeader,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { getHistory } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies.
@@ -80,6 +81,18 @@ const DepositsOverview: React.FC = () => {
 				externalAccount.status === 'errored'
 		) ?? false;
 
+	const navigateToDepositsHistory = () => {
+		recordEvent( 'wcpay_overview_deposits_view_history_click' );
+
+		const history = getHistory();
+		history.push(
+			getAdminUrl( {
+				page: 'wc-admin',
+				path: '/payments/deposits',
+			} )
+		);
+	};
+
 	// Show a loading state if the page is still loading.
 	if ( isLoading ) {
 		return (
@@ -189,15 +202,7 @@ const DepositsOverview: React.FC = () => {
 					{ hasRecentDeposits && (
 						<Button
 							variant="secondary"
-							href={ getAdminUrl( {
-								page: 'wc-admin',
-								path: '/payments/deposits',
-							} ) }
-							onClick={ () =>
-								recordEvent(
-									'wcpay_overview_deposits_view_history_click'
-								)
-							}
+							onClick={ navigateToDepositsHistory }
 						>
 							{ __(
 								'View full deposits history',

client/components/deposits-overview/test/__snapshots__/index.tsx.snap

@@ -340,12 +340,12 @@ exports[`Deposits Overview information Component Renders 1`] = `
         data-wp-c16t="true"
         data-wp-component="CardFooter"
       >
-        <a
+        <button
           class="components-button is-secondary"
-          href="admin.php?page=wc-admin&path=%2Fpayments%2Fdeposits"
+          type="button"
         >
           View full deposits history
-        </a>
+        </button>
         <a
           class="components-button is-tertiary"
           href="admin.php?page=wc-settings&tab=checkout&section=woocommerce_payments#deposit-schedule"