fix transition on buttons, fix re-renders

Author: kaeizen

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

@@ -57,7 +57,7 @@
 	.stk-block-design__edit-btn-container {
 		opacity: 0;
 		z-index: 2;
-		transition: opacity 0.4s cubic-bezier(0.2, 0.6, 0.4, 1);
+		transition: opacity 0.4s cubic-bezier(0.2, 0.6, 0.4, 1), visibility 0.4s cubic-bezier(0.2, 0.6, 0.4, 1);
 		position: absolute;
 		padding: 60px 30px 30px;
 		background: linear-gradient(180deg, transparent, #fffe 40px, #fff) !important;
@@ -86,7 +86,10 @@
 			visibility: visible;
 			opacity: 1;
 			transition-delay: 1s;
-			pointer-events: initial;
+
+			.ugb-button-component {
+				pointer-events: initial;
+			}
 		}
 	}
 

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

@@ -34,6 +34,7 @@ import {
 	useEffect, useState, createContext, useContext, useCallback,
 	useMemo,
 } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 import { applyFilters } from '@wordpress/hooks'
 import { sprintf, __ } from '@wordpress/i18n'
 
@@ -78,7 +79,9 @@ export const ModalDesignLibrary = props => {
 	const [ selectedContainerScheme, setSelectedContainerScheme ] = useState( '' )
 	const [ selectedBackgroundScheme, setSelectedBackgroundScheme ] = useState( '' )
 
-	const savedPatterns = applyFilters( 'stackable.design-library.patterns', [], selectedTab )
+	const savedPatterns = useSelect( select => {
+		return applyFilters( 'stackable.design-library.patterns', [], select )
+	}, [] )
 
 	// For version 4, the default tab is now 'patterns' and for category, we use '' instead of 'All'.
 	// So we need to update the local storage values here.