fix Editor Sidebar Loading State

newfold-labs · Mar 8, 2025 · f0708e0 · f0708e0
1 parent f919c6e
commit f0708e0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/index.js b/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();

diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss b/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;
+}