fix(ui): do not rerender top panel buttons

invokeai/frontend/web/src/features/nodes/components/NodeEditorSettings.tsx

@@ -15,7 +15,7 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAISwitch from 'common/components/IAISwitch';
-import { ChangeEvent, useCallback } from 'react';
+import { ChangeEvent, memo, useCallback } from 'react';
 import { FaCog } from 'react-icons/fa';
 import {
   shouldAnimateEdgesChanged,
@@ -23,21 +23,26 @@ import {
   shouldSnapToGridChanged,
   shouldValidateGraphChanged,
 } from '../store/nodesSlice';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 
-const selector = createSelector(stateSelector, ({ nodes }) => {
-  const {
-    shouldAnimateEdges,
-    shouldValidateGraph,
-    shouldSnapToGrid,
-    shouldColorEdges,
-  } = nodes;
-  return {
-    shouldAnimateEdges,
-    shouldValidateGraph,
-    shouldSnapToGrid,
-    shouldColorEdges,
-  };
-});
+const selector = createSelector(
+  stateSelector,
+  ({ nodes }) => {
+    const {
+      shouldAnimateEdges,
+      shouldValidateGraph,
+      shouldSnapToGrid,
+      shouldColorEdges,
+    } = nodes;
+    return {
+      shouldAnimateEdges,
+      shouldValidateGraph,
+      shouldSnapToGrid,
+      shouldColorEdges,
+    };
+  },
+  defaultSelectorOptions
+);
 
 const NodeEditorSettings = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -136,4 +141,4 @@ const NodeEditorSettings = () => {
   );
 };
 
-export default NodeEditorSettings;
+export default memo(NodeEditorSettings);

invokeai/frontend/web/src/features/nodes/components/ui/ClearGraphButton.tsx

@@ -25,7 +25,9 @@ const ClearGraphButton = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const cancelRef = useRef<HTMLButtonElement | null>(null);
 
-  const nodes = useAppSelector((state: RootState) => state.nodes.nodes);
+  const nodesCount = useAppSelector(
+    (state: RootState) => state.nodes.nodes.length
+  );
 
   const handleConfirmClear = useCallback(() => {
     dispatch(nodeEditorReset());
@@ -49,7 +51,7 @@ const ClearGraphButton = () => {
         tooltip={t('nodes.clearGraph')}
         aria-label={t('nodes.clearGraph')}
         onClick={onOpen}
-        isDisabled={nodes.length === 0}
+        isDisabled={!nodesCount}
       />
 
       <AlertDialog

invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx

@@ -8,7 +8,7 @@ import IAIIconButton, {
 import { selectIsReadyNodes } from 'features/nodes/store/selectors';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaPlay } from 'react-icons/fa';
@@ -18,7 +18,7 @@ interface InvokeButton
   iconButton?: boolean;
 }
 
-export default function NodeInvokeButton(props: InvokeButton) {
+const NodeInvokeButton = (props: InvokeButton) => {
   const { iconButton = false, ...rest } = props;
   const dispatch = useAppDispatch();
   const activeTabName = useAppSelector(activeTabNameSelector);
@@ -92,4 +92,6 @@ export default function NodeInvokeButton(props: InvokeButton) {
       </Box>
     </Box>
   );
-}
+};
+
+export default memo(NodeInvokeButton);

invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx

@@ -1,11 +1,11 @@
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaSyncAlt } from 'react-icons/fa';
 import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 
-export default function ReloadSchemaButton() {
+const ReloadSchemaButton = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
@@ -21,4 +21,6 @@ export default function ReloadSchemaButton() {
       onClick={handleReloadSchema}
     />
   );
-}
+};
+
+export default memo(ReloadSchemaButton);