fix spinner when fetching from cloud

Author: kaeizen

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

@@ -24,7 +24,7 @@ import {
 	forwardRef, useEffect, useRef, useState,
 } from '@wordpress/element'
 import { useSelect } from '@wordpress/data'
-import { Dashicon, Spinner } from '@wordpress/components'
+import { Dashicon } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 import { serialize } from '@wordpress/blocks'
 import { applyFilters } from '@wordpress/hooks'
@@ -41,7 +41,6 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 		category = '',
 		plan,
 		selectedNum = false,
-		isBusy,
 		containerScheme,
 		backgroundScheme,
 		enableBackground,
@@ -68,7 +67,6 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 		'ugb-design-library-item',
 		'ugb-design-library-item--toggle',
 	], {
-		'ugb--is-busy': isBusy,
 		[ `ugb--is-${ plan }` ]: ! isPro && plan !== 'free',
 		'ugb--is-toggled': selectedNum,
 	} )
@@ -250,7 +248,6 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 				onClick( designId, parsedBlocks, blocksForSubstitutionRef.current )
 			} }
 		>
-			{ isBusy && <span className="ugb-design-library-item__spinner" data-testid="spinner"><Spinner /></span> }
 			{ ! isPro && plan !== 'free' && <span className="stk-pulsating-circle" role="presentation" /> }
 			<div style={ { position: 'relative' } }>
 				{ ! isPro && plan !== 'free' && (
@@ -267,14 +264,13 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 					} }
 				>
 
-					<div className="stk-block-design__host" ref={ hostRef } style={ { visibility: isBusy ? 'hidden' : 'visible', opacity: isBusy ? '0' : '' } } />
+					<div className="stk-block-design__host" ref={ hostRef } />
 				</div>
 			</div>
 
 			<footer
 				// Add the number if isToggle is a number, signifying an order instead of just an on/off.
 				data-selected-num={ selectedNum }
-				style={ { visibility: isBusy ? 'hidden' : 'visible' } }
 			>
 				<div>
 					<h4> { label } </h4>

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

@@ -48,35 +48,35 @@ const DesignLibraryList = props => {
 			setScrollTop( e.currentTarget.scrollTop )
 		} }
 	>
-		<div className={ listClasses }>
-			{ ( designs || [] ).map( ( design, i ) => {
-				const selectedNum = selectedDesigns.indexOf( design.designId ) + 1
-				return (
-					<DesignLibraryItem
-						key={ i }
-						template={ design.content }
-						plan={ design.plan }
-						designId={ design.designId }
-						label={ design.title }
-						category={ design.category }
-						containerScheme={ props.containerScheme }
-						backgroundScheme={ props.backgroundScheme }
-						enableBackground={ props.enableBackground }
-						selectedNum={ selectedNum }
-						isBusy={ isBusy }
-						forceUpdate={ forceUpdate }
-						onClick={ ( designId, parsedBlocks, hasDisabledBlocks ) => onSelectMulti( designId, parsedBlocks, hasDisabledBlocks ) }
-						scrollTop={ scrollTop }
-					/>
-				)
-			} ) }
-
-			{ isBusy && <div className="ugb-design-library-search__spinner" data-testid="spinner"><Spinner /></div> }
-
-			{ ! isBusy && ! ( designs || [] ).length &&
-				<p className="components-base-control__help" data-testid="nothing-found-note">{ __( 'No designs found', i18n ) }</p>
-			}
-		</div>
+		{ isBusy && <Spinner style={ { display: 'block', margin: '0 auto' } } /> }
+		{ ! isBusy && <>
+			<div className={ listClasses }>
+				{ ( designs || [] ).map( ( design, i ) => {
+					const selectedNum = selectedDesigns.indexOf( design.designId ) + 1
+					return (
+						<DesignLibraryItem
+							key={ i }
+							template={ design.content }
+							plan={ design.plan }
+							designId={ design.designId }
+							label={ design.title }
+							category={ design.category }
+							containerScheme={ props.containerScheme }
+							backgroundScheme={ props.backgroundScheme }
+							enableBackground={ props.enableBackground }
+							selectedNum={ selectedNum }
+							forceUpdate={ forceUpdate }
+							onClick={ ( designId, parsedBlocks, hasDisabledBlocks ) => onSelectMulti( designId, parsedBlocks, hasDisabledBlocks ) }
+							scrollTop={ scrollTop }
+						/>
+					)
+				} ) }
+
+				{ ! ( designs || [] ).length &&
+					<p className="components-base-control__help" data-testid="nothing-found-note">{ __( 'No designs found', i18n ) }</p>
+				}
+			</div>
+		</> }
 	</div>
 }
 

src/components/modal-design-library/block-list.js

@@ -18,6 +18,7 @@ import classnames from 'classnames'
  */
 import { useEffect, useState } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
+import { Spinner } from '@wordpress/components'
 
 const BlockList = props => {
 	const [ categoryList, setCategoryList ] = useState( [] )
@@ -89,6 +90,10 @@ const BlockList = props => {
 		setCategoryList( sortedCategories )
 	}, [ designs, viewBy, plan ] )
 
+	if ( props.isBusy ) {
+		return <Spinner style={ { display: 'block', margin: '0 auto' } } />
+	}
+
 	return (
 		<ul className="ugb-block-list">
 			{ categoryList.reduce( ( list, itemData ) => {

src/components/modal-design-library/modal.js

@@ -81,6 +81,7 @@ export const ModalDesignLibrary = props => {
 
 	// Update the designs on the sidebar. (this will trigger the display designs update next)
 	useEffect( () => {
+		setIsBusy( true )
 		if ( doReset ) {
 			setSidebarDesigns( [] )
 			// setDisplayDesigns( [] )
@@ -92,20 +93,18 @@ export const ModalDesignLibrary = props => {
 			setSidebarDesigns( designs )
 		} ).finally( () => {
 			setDoReset( false )
+			setIsBusy( false )
 		} )
 	}, [ doReset, selectedTab ] )
 
 	// This updates the displayed designs the user can pick.
 	useEffect( () => {
-		setIsBusy( true )
 		filterDesigns( {
 			library: sidebarDesigns,
 			category: selectedCategory,
 			plan: selectedPlan.key,
 		} ).then( designs => {
 			setDisplayDesigns( designs )
-		} ).finally( () => {
-			setIsBusy( false )
 		} )
 	}, [ sidebarDesigns, selectedPlan, selectedCategory ] )
 
@@ -204,6 +203,7 @@ export const ModalDesignLibrary = props => {
 							plan={ selectedPlan.key }
 							selected={ selectedCategory }
 							onSelect={ id => setSelectedCategory( id ) }
+							isBusy={ isBusy }
 						/>
 					</div>
 					<div className="ugb-modal-design-library__style-options">