Optimize expanded image dialog rerenders

Cursor Agent committed 6 months ago

Commit d9380cd1 parent d1e85c45 files · +61 −28Browse files

Unified · Split

5 files

apps/web/src/components/ChatView.tsx +6 −2
apps/web/src/components/chat/ExpandedImageDialog.tsx +52 −28
apps/web/src/components/chat/ExpandedImagePreview.tsx +5 −0
docs/performance/expanded-image-dialog-react-scan-after.webm +0 −0
docs/performance/expanded-image-dialog-react-scan-before.webm +0 −0

apps/web/src/components/ChatView.tsx+6−2

 import { PullRequestThreadDialog } from "./PullRequestThreadDialog";
 import { MessagesTimeline } from "./chat/MessagesTimeline";
 import { ChatHeader } from "./chat/ChatHeader";
-import { type ExpandedImagePreview } from "./chat/ExpandedImagePreview";
+import { getExpandedImagePreviewKey, type ExpandedImagePreview } from "./chat/ExpandedImagePreview";
 import { NoActiveThreadState } from "./NoActiveThreadState";
 import { resolveEffectiveEnvMode, resolveEnvironmentOptionLabel } from "./BranchToolbar.logic";
 import { ProviderStatusBanner } from "./chat/ProviderStatusBanner";
       ) : null}
       {expandedImage && (
-        <ExpandedImageDialog preview={expandedImage} onClose={closeExpandedImage} />
+        <ExpandedImageDialog
+          key={getExpandedImagePreviewKey(expandedImage)}
+          preview={expandedImage}
+          onClose={closeExpandedImage}
+        />
       )}
     </div>
   );

apps/web/src/components/chat/ExpandedImageDialog.tsx+52−28

   onClose: () => void;
 }
-export const ExpandedImageDialog = memo(function ExpandedImageDialog({
+function clampImageIndex(index: number, imageCount: number): number {
-  preview: initialPreview,
+  if (imageCount <= 0) return 0;
-  onClose,
+  return Math.min(Math.max(index, 0), imageCount - 1);
-}: ExpandedImageDialogProps) {
+}
-  const [preview, setPreview] = useState(initialPreview);
-  // Sync when the parent hands us a new preview reference.
-  useEffect(() => {
-    setPreview(initialPreview);
-  }, [initialPreview]);
-  const navigateImage = useCallback((direction: -1 | 1) => {
-    setPreview((existing) => {
-      if (existing.images.length <= 1) return existing;
-      const nextIndex =
-        (existing.index + direction + existing.images.length) % existing.images.length;
-      if (nextIndex === existing.index) return existing;
-      return { ...existing, index: nextIndex };
-    });
-  }, []);
+function useExpandedImageDialogKeyboardNavigation({
+  imageCount,
+  navigateImage,
+  onClose,
+}: {
+  imageCount: number;
+  navigateImage: (direction: -1 | 1) => void;
+  onClose: () => void;
+}) {
   useEffect(() => {
     const onKeyDown = (event: globalThis.KeyboardEvent) => {
       if (event.key === "Escape") {
         onClose();
         return;
       }
-      if (preview.images.length <= 1) return;
+      if (imageCount <= 1) return;
       if (event.key === "ArrowLeft") {
         event.preventDefault();
         event.stopPropagation();
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [navigateImage, onClose, preview.images.length]);
+  }, [imageCount, navigateImage, onClose]);
+}
+export const ExpandedImageDialog = memo(function ExpandedImageDialog({
+  preview,
+  onClose,
+}: ExpandedImageDialogProps) {
+  const imageCount = preview.images.length;
+  const [imageIndex, setImageIndex] = useState(() => clampImageIndex(preview.index, imageCount));
+  const activeImageIndex = clampImageIndex(imageIndex, imageCount);
+  const navigateImage = useCallback(
+    (direction: -1 | 1) => {
+      setImageIndex((existing) => {
+        if (imageCount <= 1) return existing;
+        return (existing + direction + imageCount) % imageCount;
+      });
+    },
+    [imageCount],
+  );
+  const navigateToPreviousImage = useCallback(() => {
+    navigateImage(-1);
+  }, [navigateImage]);
+  const navigateToNextImage = useCallback(() => {
+    navigateImage(1);
+  }, [navigateImage]);
+  useExpandedImageDialogKeyboardNavigation({
+    imageCount,
+    navigateImage,
+    onClose,
+  });
-  const item = preview.images[preview.index];
+  const item = preview.images[activeImageIndex];
   if (!item) return null;
   return (
         aria-label="Close image preview"
         onClick={onClose}
       />
-      {preview.images.length > 1 && (
+      {imageCount > 1 && (
         <Button
           type="button"
           size="icon"
           variant="ghost"
           className="absolute left-2 top-1/2 z-20 -translate-y-1/2 text-white/90 hover:bg-white/10 hover:text-white sm:left-6"
           aria-label="Previous image"
-          onClick={() => navigateImage(-1)}
+          onClick={navigateToPreviousImage}
         >
           <ChevronLeftIcon className="size-5" />
         </Button>
         />
         <p className="mt-2 max-w-[92vw] truncate text-center text-xs text-muted-foreground/80">
           {item.name}
-          {preview.images.length > 1 ? ` (${preview.index + 1}/${preview.images.length})` : ""}
+          {imageCount > 1 ? ` (${activeImageIndex + 1}/${imageCount})` : ""}
         </p>
       </div>
-      {preview.images.length > 1 && (
+      {imageCount > 1 && (
         <Button
           type="button"
           size="icon"
           variant="ghost"
           className="absolute right-2 top-1/2 z-20 -translate-y-1/2 text-white/90 hover:bg-white/10 hover:text-white sm:right-6"
           aria-label="Next image"
-          onClick={() => navigateImage(1)}
+          onClick={navigateToNextImage}
         >
           <ChevronRightIcon className="size-5" />
         </Button>

apps/web/src/components/chat/ExpandedImagePreview.tsx+5−0

   index: number;
 }
+export function getExpandedImagePreviewKey(preview: ExpandedImagePreview): string {
+  const selectedImage = preview.images[preview.index];
+  return `${preview.index}:${preview.images.length}:${selectedImage?.src ?? ""}`;
+}
 export function buildExpandedImagePreview(
   images: ReadonlyArray<{ id: string; name: string; previewUrl?: string }>,
   selectedImageId: string,

docs/performance/expanded-image-dialog-react-scan-after.webm+0−0

Binary file not shown.

docs/performance/expanded-image-dialog-react-scan-before.webm+0−0

Binary file not shown.