perf(ui): disable useInert on modals

This hook forcibly updates _all_ portals with `data-hidden=true` when the modal opens - then reverts it when the modal closes. It's intended to help screen readers. Unfortunately, this absolutely tanks performance because we have many portals. React needs to do alot of layout calculations (not re-renders).

IMO this behaviour is a bug in chakra. The modals which generated the portals are hidden by default, so this data attr should really be set by default. Dunno why it isn't.

invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx

@@ -83,6 +83,7 @@ const ChangeBoardModal = () => {
       acceptCallback={handleChangeBoard}
       acceptButtonText={t('boards.move')}
       cancelButtonText={t('boards.cancel')}
+      useInert={false}
     >
       <Flex flexDir="column" gap={4}>
         <Text>

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx

@@ -81,6 +81,7 @@ const DeleteImageModal = () => {
       cancelButtonText={t('boards.cancel')}
       acceptButtonText={t('controlnet.delete')}
       acceptCallback={handleDelete}
+      useInert={false}
     >
       <Flex direction="column" gap={3}>
         <ImageUsageMessage imageUsage={imageUsageSummary} />

invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx

@@ -20,7 +20,7 @@ export const DynamicPromptsModal = memo(() => {
   const { isOpen, onClose } = useDynamicPromptsModal();
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal isOpen={isOpen} onClose={onClose} isCentered useInert={false}>
       <ModalOverlay />
       <ModalContent w="80vw" h="80vh" maxW="unset" maxH="unset">
         <ModalHeader>{t('dynamicPrompts.dynamicPrompts')}</ModalHeader>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx

@@ -123,6 +123,7 @@ const ModelListItem = ({ model }: ModelListItemProps) => {
         title={t('modelManager.deleteModel')}
         acceptCallback={handleModelDelete}
         acceptButtonText={t('modelManager.delete')}
+        useInert={false}
       >
         <Flex rowGap={4} flexDirection="column">
           <Text fontWeight="bold">{t('modelManager.deleteMsg1')}</Text>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx

@@ -67,6 +67,7 @@ export const ModelConvertButton = memo(({ modelConfig }: ModelConvertProps) => {
         acceptButtonText={`${t('modelManager.convert')}`}
         isOpen={isOpen}
         onClose={onClose}
+        useInert={false}
       >
         <Flex flexDirection="column" rowGap={4}>
           <Text fontSize="md">{t('modelManager.convertToDiffusersHelpText1')}</Text>

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx

@@ -47,6 +47,7 @@ const ClearFlowButton = () => {
         onClose={onClose}
         title={t('nodes.clearWorkflow')}
         acceptCallback={handleNewWorkflow}
+        useInert={false}
       >
         <Flex flexDir="column" gap={2}>
           <Text>{t('nodes.clearWorkflowDesc')}</Text>

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx

@@ -102,7 +102,7 @@ const WorkflowEditorSettings = ({ children }: Props) => {
     <>
       {children({ onOpen })}
 
-      <Modal isOpen={isOpen} onClose={onClose} size="2xl" isCentered>
+      <Modal isOpen={isOpen} onClose={onClose} size="2xl" isCentered useInert={false}>
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>{t('nodes.workflowSettings')}</ModalHeader>

invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx

@@ -22,6 +22,7 @@ export const ClearQueueConfirmationsAlertDialog = memo(() => {
       title={t('queue.clearTooltip')}
       acceptCallback={clearQueue}
       acceptButtonText={t('queue.clear')}
+      useInert={false}
     >
       <Text>{t('queue.clearQueueAlertDialog')}</Text>
       <br />

invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetModal.tsx

@@ -67,7 +67,7 @@ export const StylePresetModal = () => {
   }, [stylePresetModalState.prefilledFormData]);
 
   return (
-    <Modal isOpen={stylePresetModalState.isModalOpen} onClose={handleCloseModal} isCentered size="2xl">
+    <Modal isOpen={stylePresetModalState.isModalOpen} onClose={handleCloseModal} isCentered size="2xl" useInert={false}>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>{modalTitle}</ModalHeader>

invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx

@@ -179,6 +179,7 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
         acceptCallback={handleDeletePreset}
         acceptButtonText={t('common.delete')}
         cancelButtonText={t('common.cancel')}
+        useInert={false}
       >
         <p>{t('stylePresets.deleteTemplate2')}</p>
       </ConfirmationAlertDialog>

invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx

@@ -53,7 +53,7 @@ const AboutModal = ({ children }: AboutModalProps) => {
       {cloneElement(children, {
         onClick: onOpen,
       })}
-      <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
+      <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl" useInert={false}>
         <ModalOverlay />
         <ModalContent maxH="80vh" h="34rem">
           <ModalHeader>{t('accessibility.about')}</ModalHeader>

invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx

@@ -70,7 +70,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
       {cloneElement(children, {
         onClick: onOpen,
       })}
-      <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
+      <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl" useInert={false}>
         <ModalOverlay />
         <ModalContent maxH="80vh" h="80vh">
           <ModalHeader>{t('hotkeys.keyboardShortcuts')}</ModalHeader>

invokeai/frontend/web/src/features/workflowLibrary/components/LoadWorkflowFromGraphModal/LoadWorkflowFromGraphModal.tsx

@@ -62,7 +62,7 @@ export const LoadWorkflowFromGraphModal = () => {
     onClose();
   }, [dispatch, onClose, workflowRaw]);
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal isOpen={isOpen} onClose={onClose} isCentered useInert={false}>
       <ModalOverlay />
       <ModalContent w="80vw" h="80vh" maxW="unset" maxH="unset">
         <ModalHeader>{t('workflows.loadFromGraph')}</ModalHeader>

invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog.tsx

@@ -46,6 +46,7 @@ export const NewWorkflowConfirmationAlertDialog = memo((props: Props) => {
         onClose={onClose}
         title={t('nodes.newWorkflow')}
         acceptCallback={handleNewWorkflow}
+        useInert={false}
       >
         <Flex flexDir="column" gap={2}>
           <Text>{t('nodes.newWorkflowDesc')}</Text>

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx

@@ -16,7 +16,7 @@ const WorkflowLibraryModal = () => {
   const { t } = useTranslation();
   const { isOpen, onClose } = useWorkflowLibraryModalContext();
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal isOpen={isOpen} onClose={onClose} isCentered useInert={false}>
       <ModalOverlay />
       <ModalContent w="80%" h="80%" minW="unset" minH="unset" maxW="1200px" maxH="664px">
         <ModalHeader>{t('workflows.workflowLibrary')}</ModalHeader>