Added ProfileSpinner component to display when Core Profiler assets are loading

plugins/woocommerce-admin/client/core-profiler/components/profile-spinner/profile-spinner.scss

@@ -0,0 +1,12 @@
+.woocommerce-profile-wizard__spinner {
+	align-items: center;
+	display: flex;
+	margin: 0 auto;
+	height: 100vh;
+	justify-content: center;
+
+	.components-spinner {
+		width: 48px;
+		height: 48px;
+	}
+}

plugins/woocommerce-admin/client/core-profiler/components/profile-spinner/profile-spinner.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Spinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './profile-spinner.scss';
+
+export const ProfileSpinner = () => {
+	return (
+		<>
+            <div 
+                className={ `woocommerce-profile-wizard__spinner` }
+                data-testid="core-profiler-loading-screen"
+            >
+                <Spinner />
+            </div>
+		</>
+	);
+};

plugins/woocommerce-admin/client/core-profiler/index.tsx

@@ -47,6 +47,7 @@ import {
 	InstalledPlugin,
 	PluginInstallError,
 } from './services/installAndActivatePlugins';
+import { ProfileSpinner } from './components/profile-spinner/profile-spinner';
 
 export type InitializationCompleteEvent = {
 	type: 'INITIALIZATION_COMPLETE';
@@ -1206,9 +1207,7 @@ export const CoreProfilerController = ( {
 	const navigationProgress = currentNodeMeta?.progress; // This value is defined in each state node's meta tag, we can assume it is 0-100
 	const CurrentComponent =
 		currentNodeMeta?.component ??
-		( () => (
-			<div data-testid="core-profiler-loading-screen">Insert Spinner</div>
-		) ); // If no component is defined for the state then its a loading state
+		( () => ( <ProfileSpinner /> ) ); // If no component is defined for the state then its a loading state
 
 	useEffect( () => {
 		document.body.classList.remove( 'woocommerce-admin-is-loading' );