feat: improve library sidebar performance (#9060)

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

packages/excalidraw/components/LibraryMenu.tsx

@@ -2,9 +2,8 @@ import React, {
   useState,
   useCallback,
   useMemo,
-  useEffect,
-  memo,
   useRef,
+  useEffect,
 } from "react";
 import type Library from "../data/library";
 import {
@@ -18,7 +17,6 @@ import type {
   LibraryItem,
   ExcalidrawProps,
   UIAppState,
-  AppClassProperties,
 } from "../types";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { trackEvent } from "../analytics";
@@ -35,12 +33,9 @@ import { useUIAppState } from "../context/ui-appState";
 
 import "./LibraryMenu.scss";
 import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
-import type {
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-} from "../element/types";
-import { LIBRARY_DISABLED_TYPES } from "../constants";
 import { isShallowEqual } from "../utils";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import { LIBRARY_DISABLED_TYPES } from "../constants";
 
 export const isLibraryMenuOpenAtom = atom(false);
 
@@ -48,8 +43,7 @@ const LibraryMenuWrapper = ({ children }: { children: React.ReactNode }) => {
   return <div className="layer-ui__library">{children}</div>;
 };
 
-const LibraryMenuContent = memo(
+export const LibraryMenuContent = ({
-  ({
   onInsertLibraryItems,
   pendingElements,
   onAddToLibrary,
@@ -60,7 +54,7 @@ const LibraryMenuContent = memo(
   theme,
   selectedItems,
   onSelectItems,
-  }: {
+}: {
   pendingElements: LibraryItem["elements"];
   onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: () => void;
@@ -71,7 +65,7 @@ const LibraryMenuContent = memo(
   theme: UIAppState["theme"];
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
-  }) => {
+}) => {
   const [libraryItemsData] = useAtom(libraryItemsAtom);
 
   const _onAddToLibrary = useCallback(
@@ -156,107 +150,63 @@ const LibraryMenuContent = memo(
       )}
     </LibraryMenuWrapper>
   );
-  },
+};
-);
-
-const getPendingElements = (
-  elements: readonly NonDeletedExcalidrawElement[],
-  selectedElementIds: UIAppState["selectedElementIds"],
-) => ({
-  elements,
-  pending: getSelectedElements(
-    elements,
-    { selectedElementIds },
-    {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    },
-  ),
-  selectedElementIds,
-});
 
 const usePendingElementsMemo = (
   appState: UIAppState,
-  app: AppClassProperties,
+  elements: readonly NonDeletedExcalidrawElement[],
 ) => {
-  const elements = useExcalidrawElements();
+  const create = useCallback(
-  const [state, setState] = useState(() =>
+    (appState: UIAppState, elements: readonly NonDeletedExcalidrawElement[]) =>
-    getPendingElements(elements, appState.selectedElementIds),
+      getSelectedElements(elements, appState, {
-  );
+        includeBoundTextElement: true,
-
+        includeElementsInFrames: true,
-  const selectedElementVersions = useRef(
+      }),
-    new Map<ExcalidrawElement["id"], ExcalidrawElement["version"]>(),
+    [],
   );
 
-  useEffect(() => {
+  const val = useRef(create(appState, elements));
-    for (const element of state.pending) {
+  const prevAppState = useRef<UIAppState>(appState);
-      selectedElementVersions.current.set(element.id, element.version);
+  const prevElements = useRef(elements);
-    }
-  }, [state.pending]);
 
-  useEffect(() => {
+  const update = useCallback(() => {
-    if (
-      // Only update once pointer is released.
-      // Reading directly from app.state to make it clear it's not reactive
-      // (hence, there's potential for stale state)
-      app.state.cursorButton === "up" &&
-      app.state.activeTool.type === "selection"
-    ) {
-      setState((prev) => {
-        // if selectedElementIds changed, we don't have to compare versions
-        // ---------------------------------------------------------------------
-        if (
-          !isShallowEqual(prev.selectedElementIds, appState.selectedElementIds)
-        ) {
-          selectedElementVersions.current.clear();
-          return getPendingElements(elements, appState.selectedElementIds);
-        }
-        // otherwise we need to check whether selected elements changed
-        // ---------------------------------------------------------------------
-        const elementsMap = app.scene.getNonDeletedElementsMap();
-        for (const id of Object.keys(appState.selectedElementIds)) {
-          const currVersion = elementsMap.get(id)?.version;
     if (
-            currVersion &&
+      !isShallowEqual(
-            currVersion !== selectedElementVersions.current.get(id)
+        appState.selectedElementIds,
+        prevAppState.current.selectedElementIds,
+      ) ||
+      !isShallowEqual(elements, prevElements.current)
     ) {
-            // we can't update the selectedElementVersions in here
+      val.current = create(appState, elements);
-            // because of double render in StrictMode which would overwrite
+      prevAppState.current = appState;
-            // the state in the second pass with the old `prev` state.
+      prevElements.current = elements;
-            // Thus, we update versions in a separate effect. May create
-            // a race condition since current effect is not fully reactive.
-            return getPendingElements(elements, appState.selectedElementIds);
-          }
     }
-        // nothing changed
+  }, [create, appState, elements]);
-        // ---------------------------------------------------------------------
+
-        return prev;
+  return useMemo(
-      });
+    () => ({
-    }
+      update,
-  }, [
+      value: val.current,
-    app,
+    }),
-    app.state.cursorButton,
+    [update, val],
-    app.state.activeTool.type,
+  );
-    appState.selectedElementIds,
-    elements,
-  ]);
-
-  return state.pending;
 };
 
 /**
  * This component is meant to be rendered inside <Sidebar.Tab/> inside our
  * <DefaultSidebar/> or host apps Sidebar components.
  */
-export const LibraryMenu = memo(() => {
+export const LibraryMenu = () => {
-  const app = useApp();
+  const { library, id, onInsertElements } = useApp();
-  const { onInsertElements } = app;
   const appProps = useAppProps();
   const appState = useUIAppState();
+  const app = useApp();
   const setAppState = useExcalidrawSetAppState();
+  const elements = useExcalidrawElements();
   const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
-  const memoizedLibrary = useMemo(() => app.library, [app.library]);
+  const memoizedLibrary = useMemo(() => library, [library]);
-  const pendingElements = usePendingElementsMemo(appState, app);
+  // BUG: pendingElements are still causing some unnecessary rerenders because clicking into canvas returns some ids even when no element is selected.
+  const pendingElements = usePendingElementsMemo(appState, elements);
 
   const onInsertLibraryItems = useCallback(
     (libraryItems: LibraryItems) => {
@@ -273,18 +223,22 @@ export const LibraryMenu = memo(() => {
     });
   }, [setAppState]);
 
+  useEffect(() => {
+    return app.onPointerUpEmitter.on(() => pendingElements.update());
+  }, [app, pendingElements]);
+
   return (
     <LibraryMenuContent
-      pendingElements={pendingElements}
+      pendingElements={pendingElements.value}
       onInsertLibraryItems={onInsertLibraryItems}
       onAddToLibrary={deselectItems}
       setAppState={setAppState}
       libraryReturnUrl={appProps.libraryReturnUrl}
       library={memoizedLibrary}
-      id={app.id}
+      id={id}
       theme={appState.theme}
       selectedItems={selectedItems}
       onSelectItems={setSelectedItems}
     />
   );
-});
+};