show spinner

Author: kaeizen

src/components/design-library-list/design-library-list-item.js

@@ -56,10 +56,6 @@ const DesignLibraryListItem = props => {
 	} = useAutoScroll( hostRef, shadowBodySizeRef, selectedTab )
 
 	const getDesignPreviewSize = () => {
-		if ( ! shadowRoot || isLoading ) {
-			return 0
-		}
-
 		return selectedNum && selectedData ? selectedData.selectedPreviewSize.preview
 			: ( enableBackground ? previewSize.heightBackground : previewSize.heightNoBackground )
 	}
@@ -109,21 +105,22 @@ const DesignLibraryListItem = props => {
 				) }
 				{ isLoading && <div className="stk-spinner-container"><Spinner /></div> }
 				<div
-					className="stk-block-design__host-container"
+					className={ `stk-block-design__host-container ${ ! shadowRoot || isLoading ? 'stk-is-loading' : 'stk-show' }` }
 					style={ {
 						transform: `scale(${ selectedNum && selectedData ? selectedData.selectedPreviewSize.scale : previewSize?.scale })`,
 						transformOrigin: 'top left',
 						height: getDesignPreviewSize(),
 					} }
 				>
 					<div className="stk-block-design__host" ref={ hostRef }>
-						{ shadowRoot && ! isLoading && <DesignPreview
+						{ shadowRoot && <DesignPreview
 							blocks={ blocks }
 							shadowRoot={ shadowRoot }
 							selectedTab={ selectedTab }
 							designIndex={ props.designIndex }
 							onMouseDown={ onMouseDown }
 							updateShadowBodySize={ updateShadowBodySize }
+							setIsLoading={ setIsLoading }
 						/> }
 					</div>
 				</div>

src/components/design-library-list/design-preview.js

@@ -16,6 +16,7 @@ export const DesignPreview = ( {
 	designIndex,
 	onMouseDown = NOOP,
 	updateShadowBodySize = NOOP,
+	setIsLoading,
 } ) => {
 	const ref = useRef( null )
 	const wrapperRef = useRef( null )
@@ -96,10 +97,15 @@ export const DesignPreview = ( {
 			return
 		}
 
+		setIsLoading( true )
+
 		requestAnimationFrame( () => {
 			ric( () => {
 				wrapper.innerHTML = sanitizedHTML
 				updateShadowBodySize()
+				requestAnimationFrame( () => {
+					ric( () => setIsLoading( false ) )
+				} )
 			} )
 		} )
 	}, [ blocks ] )

src/components/design-library-list/editor.scss

@@ -188,6 +188,14 @@
 
 .stk-block-design__host-container {
 	position: relative;
+	transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.4, 1);
+  	will-change: opacity;
+	&.stk-is-loading {
+		opacity: 0;
+	}
+	&.stk-show {
+		opacity: 1;
+	}
 }
 
 .stk--design-preview-large {
@@ -233,7 +241,7 @@
 	}
 
 	&.stk-design-library__item-pages .stk-spinner-container {
-		height: 343px;
+		height: 100%;
 		display: flex;
 		.components-spinner {
 			margin: auto;