hide spinner

Author: kaeizen

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

@@ -103,9 +103,9 @@ const DesignLibraryListItem = props => {
 						showHideNote={ false }
 					/>
 				) }
-				{ isLoading && <div className="stk-spinner-container"><Spinner /></div> }
+				<div className={ `stk-spinner-container ${ isLoading ? '' : 'stk-hide-spinner' }` }><Spinner /></div>
 				<div
-					className={ `stk-block-design__host-container ${ ! shadowRoot || isLoading ? 'stk-is-loading' : 'stk-show' }` }
+					className="stk-block-design__host-container"
 					style={ {
 						transform: `scale(${ selectedNum && selectedData ? selectedData.selectedPreviewSize.scale : previewSize?.scale })`,
 						transformOrigin: 'top left',

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

@@ -188,14 +188,6 @@
 
 .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 {
@@ -235,13 +227,23 @@
 
 
 .ugb-design-library-items {
-	.stk-spinner-container .components-spinner {
-		display: block;
-		margin: 50px auto;
+	.stk-spinner-container {
+		height: 100%;
+		width: 100%;
+		position: absolute;
+		transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.4, 1);
+  		will-change: opacity;
+		opacity: 1;
+		&.stk-hide-spinner {
+			opacity: 0;
+		}
+		.components-spinner {
+			display: block;
+			margin: 50px auto;
+		}
 	}
 
 	&.stk-design-library__item-pages .stk-spinner-container {
-		height: 100%;
 		display: flex;
 		.components-spinner {
 			margin: auto;