[Enhancement]: Implement Lazy Loading inside ProductPage component (#46601)

* Improve fcp

* Add spinner

* Add changelog

plugins/woocommerce-admin/client/products/product-page.tsx

@@ -8,11 +8,11 @@ import {
 	productApiFetchMiddleware,
 	TRACKS_SOURCE,
 	__experimentalProductMVPCESFooter as FeedbackBar,
-	__experimentalProductMVPFeedbackModalContainer as ProductMVPFeedbackModalContainer,
 	__experimentalEditorLoadingContext as EditorLoadingContext,
 } from '@woocommerce/product-editor';
+import { Spinner } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
-import { useContext, useEffect } from '@wordpress/element';
+import React, { lazy, Suspense, useContext, useEffect } from 'react';
 import { registerPlugin, unregisterPlugin } from '@wordpress/plugins';
 import { useParams } from 'react-router-dom';
 import { WooFooterItem } from '@woocommerce/admin-layout';
@@ -21,12 +21,21 @@ import { WooFooterItem } from '@woocommerce/admin-layout';
  * Internal dependencies
  */
 import { useProductEntityRecord } from './hooks/use-product-entity-record';
-import BlockEditorTourWrapper from './tour/block-editor/block-editor-tour-wrapper';
 import { MoreMenuFill } from './fills/product-block-editor-fills';
 import './product-page.scss';
 
 productApiFetchMiddleware();
 
+// Lazy load components
+const BlockEditorTourWrapper = lazy(
+	() => import( './tour/block-editor/block-editor-tour-wrapper' )
+);
+const ProductMVPFeedbackModalContainer = lazy( () =>
+	import( '@woocommerce/product-editor' ).then( ( module ) => ( {
+		default: module.__experimentalProductMVPFeedbackModalContainer,
+	} ) )
+);
+
 export default function ProductPage() {
 	const { productId } = useParams();
 
@@ -56,17 +65,21 @@ export default function ProductPage() {
 						<WooFooterItem>
 							<>
 								<FeedbackBar productType="product" />
-								<ProductMVPFeedbackModalContainer
-									productId={
-										productId
-											? parseInt( productId, 10 )
-											: undefined
-									}
-								/>
+								<Suspense fallback={ <Spinner /> }>
+									<ProductMVPFeedbackModalContainer
+										productId={
+											productId
+												? parseInt( productId, 10 )
+												: undefined
+										}
+									/>
+								</Suspense>
 							</>
 						</WooFooterItem>
 
-						<BlockEditorTourWrapper />
+						<Suspense fallback={ <Spinner /> }>
+							<BlockEditorTourWrapper />
+						</Suspense>
 					</>
 				);
 			},

plugins/woocommerce/changelog/dev-improving_product_editor_fcp

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Implement Lazy Loading inside ProductPage component #46399