Use AsyncLoad to fix type error

Author: arthur791004

client/sites/components/sites-dataviews/actions.tsx

@@ -11,10 +11,10 @@ import { sprintf } from '@wordpress/i18n';
 import { drawerLeft, external, wordpress } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { addQueryArgs } from '@wordpress/url';
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import AsyncLoad from 'calypso/components/async-load';
 import { USE_SITE_EXCERPTS_QUERY_KEY } from 'calypso/data/sites/use-site-excerpts-query';
 import useRestoreSiteMutation from 'calypso/sites/hooks/use-restore-site-mutation';
-import { LazyLeaveSiteModalForm } from 'calypso/sites/settings/administration/tools/leave-site';
 import {
 	getAdminInterface,
 	getPluginsUrl,
@@ -521,23 +521,23 @@ export function useActions( {
 				isEligible: isActionEligible( 'leave-site', capabilities ),
 				RenderModal: ( { items, closeModal }: RenderModalProps< SiteExcerptData > ) => {
 					return (
-						<Suspense>
-							<LazyLeaveSiteModalForm
-								siteId={ items[ 0 ]?.ID ?? 0 }
-								onSuccess={ () => {
-									queryClient.invalidateQueries( {
-										queryKey: [
-											USE_SITE_EXCERPTS_QUERY_KEY,
-											SITE_EXCERPT_REQUEST_FIELDS,
-											SITE_EXCERPT_REQUEST_OPTIONS,
-											[],
-											'all',
-										],
-									} );
-								} }
-								onClose={ closeModal }
-							/>
-						</Suspense>
+						<AsyncLoad
+							require="calypso/sites/settings/administration/tools/leave-site/leave-site-form"
+							placeholder={ null }
+							siteId={ items[ 0 ]?.ID ?? 0 }
+							onSuccess={ () => {
+								queryClient.invalidateQueries( {
+									queryKey: [
+										USE_SITE_EXCERPTS_QUERY_KEY,
+										SITE_EXCERPT_REQUEST_FIELDS,
+										SITE_EXCERPT_REQUEST_OPTIONS,
+										[],
+										'all',
+									],
+								} );
+							} }
+							onClose={ closeModal }
+						/>
 					);
 				},
 				modalSize: 'small',

client/sites/settings/administration/tools/index.jsx

@@ -1,12 +1,12 @@
 import { addQueryArgs } from '@wordpress/url';
 import { localize, fixMe } from 'i18n-calypso';
-import { Component, Suspense } from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
+import AsyncLoad from 'calypso/components/async-load';
 import QueryRewindState from 'calypso/components/data/query-rewind-state';
 import { withSiteCopy } from 'calypso/landing/stepper/hooks/use-site-copy';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header';
-import { LazyLeaveSiteModal } from 'calypso/sites/settings/administration/tools/leave-site';
 import { errorNotice, successNotice } from 'calypso/state/notices/actions';
 import {
 	hasLoadedSitePurchasesFromServer,
@@ -181,19 +181,21 @@ class SiteTools extends Component {
 				) }
 
 				{ showLeaveSite && (
-					<Suspense>
+					<>
 						<AdministrationToolCard
 							title={ translate( 'Leave site' ) }
 							description={ translate( 'Leave this site and remove your access.' ) }
 							onClick={ this.handleOpenModal( MODAL_NAMES.LEAVE_SITE ) }
 						/>
 						{ modalOpen[ MODAL_NAMES.LEAVE_SITE ] && (
-							<LazyLeaveSiteModal
+							<AsyncLoad
+								require="calypso/sites/settings/administration/tools/leave-site/leave-site-modal"
+								placeholder={ null }
 								siteId={ siteId }
 								onClose={ this.handleCloseModal( MODAL_NAMES.LEAVE_SITE ) }
 							/>
 						) }
-					</Suspense>
+					</>
 				) }
 
 				{ showDeleteContent && (