perf(view): reduce shell rerenders

view/LayersSheet.tsx

@@ -19,11 +19,6 @@ export type LayersSheetProps = {
 };
 
 export function LayersSheet({ document, selection, maskEdit, open, dispatch }: LayersSheetProps) {
-  const selectedArtboardId = selection.artboardId ?? document.artboards[0]?.id;
-  const selectedLayer = findLayerInfoInDocument(document, selection.layerIds[0]);
-  const canGroup = Boolean(selection.artboardId && selection.layerIds.length > 0);
-  const canUngroup = selectedLayer?.layer.type === "group";
-  const maskLayerIds = collectDocumentMaskLayerIds(document);
   const draggedLayerId = useRef<string>();
   const [editingTitle, setEditingTitle] = useState<EditingTitle>();
 
@@ -34,6 +29,42 @@ export function LayersSheet({ document, selection, maskEdit, open, dispatch }: L
         open ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-8 opacity-0"
       }`}
     >
+      {open ? (
+        <LayersSheetBody
+          document={document}
+          selection={selection}
+          maskEdit={maskEdit}
+          draggedLayerId={draggedLayerId}
+          editingTitle={editingTitle}
+          setEditingTitle={setEditingTitle}
+          dispatch={dispatch}
+        />
+      ) : null}
+    </aside>
+  );
+}
+
+function LayersSheetBody({
+  document,
+  selection,
+  maskEdit,
+  draggedLayerId,
+  editingTitle,
+  setEditingTitle,
+  dispatch,
+}: Omit<LayersSheetProps, "open"> & {
+  draggedLayerId: MutableRefObject<string | undefined>;
+  editingTitle: EditingTitle | undefined;
+  setEditingTitle: (editingTitle: EditingTitle | undefined) => void;
+}) {
+  const selectedArtboardId = selection.artboardId ?? document.artboards[0]?.id;
+  const selectedLayer = findLayerInfoInDocument(document, selection.layerIds[0]);
+  const canGroup = Boolean(selection.artboardId && selection.layerIds.length > 0);
+  const canUngroup = selectedLayer?.layer.type === "group";
+  const maskLayerIds = collectDocumentMaskLayerIds(document);
+
+  return (
+    <>
       <header className="flex h-20 items-center">
         <div className="flex w-full items-center gap-2">
           <button type="button" className={labeledToolbarButtonClass()} aria-label="Add artboard" title="Add artboard" onClick={() => addArtboard(document, dispatch)}>
@@ -145,7 +176,7 @@ export function LayersSheet({ document, selection, maskEdit, open, dispatch }: L
           </section>
         ))}
       </div>
-    </aside>
+    </>
   );
 }