feat: improve library sidebar performance (#9060)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/components/LibraryMenu.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useCallback, useMemo, useRef } from "react";
+import React, {
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+} from "react";
 import type Library from "../data/library";
 import {
   distributeLibraryItemsOnSquareGrid,
@@ -150,15 +156,20 @@ const usePendingElementsMemo = (
   appState: UIAppState,
   elements: readonly NonDeletedExcalidrawElement[],
 ) => {
-  const create = () =>
+  const create = useCallback(
+    (appState: UIAppState, elements: readonly NonDeletedExcalidrawElement[]) =>
       getSelectedElements(elements, appState, {
         includeBoundTextElement: true,
         includeElementsInFrames: true,
-    });
+      }),
-  const val = useRef(create());
+    [],
+  );
+
+  const val = useRef(create(appState, elements));
   const prevAppState = useRef<UIAppState>(appState);
   const prevElements = useRef(elements);
 
+  const update = useCallback(() => {
     if (
       !isShallowEqual(
         appState.selectedElementIds,
@@ -166,11 +177,19 @@ const usePendingElementsMemo = (
       ) ||
       !isShallowEqual(elements, prevElements.current)
     ) {
-    val.current = create();
+      val.current = create(appState, elements);
       prevAppState.current = appState;
       prevElements.current = elements;
     }
-  return val.current;
+  }, [create, appState, elements]);
+
+  return useMemo(
+    () => ({
+      update,
+      value: val.current,
+    }),
+    [update, val],
+  );
 };
 
 /**
@@ -181,6 +200,7 @@ export const LibraryMenu = () => {
   const { library, id, onInsertElements } = useApp();
   const appProps = useAppProps();
   const appState = useUIAppState();
+  const app = useApp();
   const setAppState = useExcalidrawSetAppState();
   const elements = useExcalidrawElements();
   const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
@@ -203,9 +223,13 @@ export const LibraryMenu = () => {
     });
   }, [setAppState]);
 
+  useEffect(() => {
+    return app.onPointerUpEmitter.on(() => pendingElements.update());
+  }, [app, pendingElements]);
+
   return (
     <LibraryMenuContent
-      pendingElements={pendingElements}
+      pendingElements={pendingElements.value}
       onInsertLibraryItems={onInsertLibraryItems}
       onAddToLibrary={deselectItems}
       setAppState={setAppState}

packages/excalidraw/types.ts

@@ -681,6 +681,8 @@ export type AppClassProperties = {
   getEditorUIOffsets: App["getEditorUIOffsets"];
   visibleElements: App["visibleElements"];
   excalidrawContainerValue: App["excalidrawContainerValue"];
+
+  onPointerUpEmitter: App["onPointerUpEmitter"];
 };
 
 export type PointerDownState = Readonly<{