From 0100a63b59993ba426fc731436c70e35bdc3b08f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 17 Nov 2022 19:12:49 +1100
Subject: [PATCH] Stops unnecessary canvas rescales on gallery state change

---
 frontend/src/features/gallery/ImageGallery.tsx | 18 +++++++++---------
 .../UnifiedCanvas/UnifiedCanvasDisplay.tsx     | 16 +++++-----------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/frontend/src/features/gallery/ImageGallery.tsx b/frontend/src/features/gallery/ImageGallery.tsx
index d591a5ecf0..cecb5d3aaf 100644
--- a/frontend/src/features/gallery/ImageGallery.tsx
+++ b/frontend/src/features/gallery/ImageGallery.tsx
@@ -1,7 +1,13 @@
 import { Button } from '@chakra-ui/button';
 import { NumberSize, Resizable } from 're-resizable';
 
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { MdPhotoLibrary } from 'react-icons/md';
 import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
@@ -66,7 +72,7 @@ export default function ImageGallery() {
     galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH
   );
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!shouldPinGallery) return;
 
     if (isLightBoxOpen) {
@@ -91,10 +97,9 @@ export default function ImageGallery() {
       );
       setGalleryMaxWidth(590);
     }
-    setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
   }, [dispatch, activeTabName, shouldPinGallery, galleryWidth, isLightBoxOpen]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!shouldPinGallery) {
       setGalleryMaxWidth(window.innerWidth);
     }
@@ -119,7 +124,6 @@ export default function ImageGallery() {
   };
 
   const handleCloseGallery = () => {
-    // if (shouldPinGallery) return;
     dispatch(setShouldShowGallery(false));
     dispatch(
       setGalleryScrollPosition(
@@ -127,7 +131,6 @@ export default function ImageGallery() {
       )
     );
     dispatch(setShouldHoldGalleryOpen(false));
-    // dispatch(setDoesCanvasNeedScaling(true));
   };
 
   const handleClickLoadMore = () => {
@@ -151,8 +154,6 @@ export default function ImageGallery() {
     'g',
     () => {
       handleToggleGallery();
-      shouldPinGallery &&
-        setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
     },
     [shouldShowGallery, shouldPinGallery]
   );
@@ -169,7 +170,6 @@ export default function ImageGallery() {
     'shift+g',
     () => {
       handleSetShouldPinGallery();
-      dispatch(setDoesCanvasNeedScaling(true));
     },
     [shouldPinGallery]
   );
diff --git a/frontend/src/features/tabs/UnifiedCanvas/UnifiedCanvasDisplay.tsx b/frontend/src/features/tabs/UnifiedCanvas/UnifiedCanvasDisplay.tsx
index 2569326b9a..4e21f54b0b 100644
--- a/frontend/src/features/tabs/UnifiedCanvas/UnifiedCanvasDisplay.tsx
+++ b/frontend/src/features/tabs/UnifiedCanvas/UnifiedCanvasDisplay.tsx
@@ -12,13 +12,9 @@ import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 const selector = createSelector(
   [canvasSelector],
   (canvas) => {
-    const {
-      doesCanvasNeedScaling,
-      layerState: { objects },
-    } = canvas;
+    const { doesCanvasNeedScaling } = canvas;
     return {
       doesCanvasNeedScaling,
-      doesOutpaintingHaveObjects: objects.length > 0,
     };
   },
   {
@@ -30,14 +26,12 @@ const selector = createSelector(
 
 const UnifiedCanvasDisplay = () => {
   const dispatch = useAppDispatch();
-  const { doesCanvasNeedScaling, doesOutpaintingHaveObjects } =
-    useAppSelector(selector);
+  const { doesCanvasNeedScaling } = useAppSelector(selector);
 
   useLayoutEffect(() => {
-    const resizeCallback = _.debounce(
-      () => dispatch(setDoesCanvasNeedScaling(true)),
-      250
-    );
+    const resizeCallback = _.debounce(() => {
+      dispatch(setDoesCanvasNeedScaling(true));
+    }, 250);
     window.addEventListener('resize', resizeCallback);
     return () => window.removeEventListener('resize', resizeCallback);
   }, [dispatch]);