refactor: combine duplicate useEffect hooks for UI rendering

Signed-off-by: Benjamin Frueh <[email protected]>

Author: benjaminfrueh

src/App.tsx

@@ -338,13 +338,26 @@ export default function App({
 
 	// UI Initialization Effect
 	useEffect(() => {
+
 		updateLang()
-		renderSmartPicker()
-		renderTable()
-		renderAssistant()
-		renderComment()
-		renderEmojiPicker()
-	}, [updateLang, renderSmartPicker, renderAssistant, renderEmojiPicker, renderTable, renderComment])
+		const renderCustomElements = () => {
+			renderSmartPicker()
+			renderTable()
+			renderAssistant()
+			renderComment()
+			renderEmojiPicker()
+		}
+
+		renderCustomElements()
+
+		const excalidrawElement = document.querySelector('.excalidraw')
+		if (!excalidrawElement) return
+
+		const observer = new MutationObserver(renderCustomElements)
+		observer.observe(excalidrawElement, { attributes: true, attributeFilter: ['class'] })
+
+		return () => observer.disconnect()
+	}, [updateLang, renderSmartPicker, renderAssistant, renderComment, renderEmojiPicker, renderTable])
 
 	const onLibraryChange = useCallback(async (items: LibraryItems) => {
 		if (!isLibraryLoaded) {
@@ -358,26 +371,6 @@ export default function App({
 		}
 	}, [isLibraryLoaded])
 
-	useEffect(() => {
-		const excalidrawElement = document.querySelector('.excalidraw')
-		if (!excalidrawElement) return
-
-		const observer = new MutationObserver(() => {
-			renderSmartPicker()
-			renderTable()
-			renderAssistant()
-			renderComment()
-			renderEmojiPicker()
-		})
-
-		observer.observe(excalidrawElement, {
-			attributes: true,
-			attributeFilter: ['class'],
-		})
-
-		return () => observer.disconnect()
-	}, [renderEmojiPicker, renderSmartPicker, renderTable, renderAssistant, renderComment])
-
 	const libraryReturnUrl = encodeURIComponent(window.location.href)
 
 	// Data loading is now handled by useBoardDataManager