From ab630344c5a3d130af296f8331079c3b0f1e7dc2 Mon Sep 17 00:00:00 2001
From: Josh Oakes <josh@joshoak.es>
Date: Fri, 27 Sep 2024 12:53:12 -0500
Subject: [PATCH] KAD-3459 Prevent flashing of design library in Lifter LMS

---
 .eslintrc.js                                  |  1 +
 .../prebuilt-library/toolbar-library.js       | 32 ++++++++++++-------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 2f3b3dec4..c194c5bba 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -58,6 +58,7 @@ const eslintConfig = {
 		Masonry: 'readable',
 		IntersectionObserver: 'readable',
 		getComputedStyle: 'readable',
+		MutationObserver: 'readonly',
 	},
 	rules: {
 		'@wordpress/i18n-text-domain': [
diff --git a/src/plugins/prebuilt-library/toolbar-library.js b/src/plugins/prebuilt-library/toolbar-library.js
index 0f8b259fd..9f4f5f6c5 100644
--- a/src/plugins/prebuilt-library/toolbar-library.js
+++ b/src/plugins/prebuilt-library/toolbar-library.js
@@ -20,12 +20,12 @@ import { kadenceBlocksIcon } from '@kadence/icons';
 function ToolbarLibrary() {
 	const { getSelectedBlock, getBlockIndex, getBlockHierarchyRootClientId } = useSelect(blockEditorStore);
 	const { replaceBlocks, insertBlocks } = useDispatch(blockEditorStore);
-	const [kadenceIcon, setKadenceIcon] = useState(applyFilters('kadence.blocks_icon', kadenceBlocksIcon));
+	const kadenceIcon = applyFilters('kadence.blocks_icon', kadenceBlocksIcon);
+
 	const LibraryButton = () => (
 		<ToolbarButton
 			className="kb-toolbar-prebuilt-button"
 			icon={kadenceIcon}
-			// isPrimary
 			onClick={() => {
 				const selectedBlock = getSelectedBlock();
 				if (selectedBlock && isUnmodifiedDefaultBlock(selectedBlock)) {
@@ -72,17 +72,27 @@ function ToolbarLibrary() {
 		selector.appendChild(patternButton);
 		render(<LibraryButton />, patternButton);
 	};
+
 	if (showSettings('show', 'kadence/designlibrary') && kadence_blocks_params.showDesignLibrary) {
-		// Watch for the toolbar to be visible and the design library button to be missing.
-		const unsubscribe = subscribe(() => {
-			const editToolbar = document.querySelector('.edit-post-header-toolbar');
-			if (!editToolbar) {
-				return;
-			}
-			if (!editToolbar.querySelector('.kadence-toolbar-design-library')) {
-				renderButton(editToolbar);
+		const targetNode = document.querySelector('.block-editor__container');
+		const config = { childList: true, subtree: true };
+
+		const callback = function (mutationsList, observer) {
+			for (const mutation of mutationsList) {
+				if (mutation.type === 'childList') {
+					const editToolbar = document.querySelector('.edit-post-header-toolbar');
+					if (editToolbar && !editToolbar.querySelector('.kadence-toolbar-design-library')) {
+						renderButton(editToolbar);
+						observer.disconnect();
+					}
+				}
 			}
-		});
+		};
+
+		const observer = new MutationObserver(callback);
+		if (targetNode) {
+			observer.observe(targetNode, config);
+		}
 	}
 
 	return null;