Bookmarks and properties: unmountOnExit accordions for perf, memoize …

…bookmarks (#244)

src/features/bookmarks/bookmark.tsx

@@ -15,7 +15,7 @@ import {
     useTheme,
 } from "@mui/material";
 import { css } from "@mui/styled-engine";
-import { MouseEvent, useState } from "react";
+import { memo, MouseEvent, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
@@ -69,6 +69,22 @@ const Img = styled("img")(
 );
 
 export function Bookmark({ bookmark }: { bookmark: ExtendedBookmark }) {
+    // createBookmark changes all the time (could add useCallback there but it depends on mainObjects,
+    // so going to change all the time anyway), so just pass it as a ref to avoid rerendering
+    const createBookmark = useCreateBookmark();
+    const createBookmarkRef = useRef(createBookmark);
+    return <BookmarkInnerMemoized bookmark={bookmark} createBookmark={createBookmarkRef.current} />;
+}
+
+const BookmarkInnerMemoized = memo(BookmarkInner);
+
+function BookmarkInner({
+    bookmark,
+    createBookmark,
+}: {
+    bookmark: ExtendedBookmark;
+    createBookmark: ReturnType<typeof useCreateBookmark>;
+}) {
     const {
         state: { canvas },
     } = useExplorerGlobals(true);
@@ -77,7 +93,6 @@ export function Bookmark({ bookmark }: { bookmark: ExtendedBookmark }) {
     const history = useHistory();
     const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
     const selectBookmark = useSelectBookmark();
-    const createBookmark = useCreateBookmark();
     const dispatch = useAppDispatch();
     const bookmarks = useAppSelector(selectBookmarks);
     const sceneId = useSceneId();

src/features/bookmarks/collection.tsx

@@ -58,6 +58,7 @@ export function Collection({ collection, bookmarks }: { collection: string; book
                     : dispatch(bookmarksActions.closeCollection(collection))
             }
             level={currentDepth}
+            slotProps={{ transition: { unmountOnExit: true } }}
         >
             <AccordionSummary level={currentDepth}>
                 <Box width={0} flex="1 1 auto" overflow="hidden">

src/features/properties/routes/root.tsx

@@ -446,7 +446,7 @@ function PropertyList({
                 </List>
             </Box>
             {accordions.map((accordion) => (
-                <Accordion key={accordion.name}>
+                <Accordion key={accordion.name} slotProps={{ transition: { unmountOnExit: true } }}>
                     <AccordionSummary>
                         <Box fontWeight={600} overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
                             {decodeURIComponent(accordion.name)}