Merge pull request #663 from newfold-labs/enhance/update-design-studio-loading-state

Change Editor Sidebar Loading State

Author: wpscholar

src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/index.js

@@ -6,6 +6,7 @@ import { lazy, useEffect, useState } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../../../store';
 import getContents from './contents';
 import { getCustomizeSidebarData } from '../../../../../utils/api/siteGen';
+import OrbAnimation from '../../../../../components/OrbAnimation';
 
 const DesignFontsPanel = lazy( () =>
 	import(
@@ -45,7 +46,11 @@ const Customize = forwardRef( ( props, ref ) => {
 	}, [] );
 
 	if ( loading ) {
-		return <div>...</div>;
+		return (
+			<div className="nfd-onboarding-sidebar-learn-more__loading">
+				<OrbAnimation height={ `60px` } />
+			</div>
+		);
 	}
 
 	const content = getContents();

src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss

@@ -80,3 +80,11 @@
 		}
 	}
 }
+
+.nfd-onboarding-sidebar-learn-more__loading {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}