Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): rerender mitigation sweep

Browse Source
This commit is contained in:
psychedelicious
2023-04-27 17:30:21 +10:00
parent 5d8728c7ef
commit ca1cc0e2c2
16 changed files with 98 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
View File

@ -7,6 +7,7 @@ import { setShouldShowGallery } from 'features/ui/store/uiSlice';
import { isEqual } from 'lodash-es';
import { MdPhotoLibrary } from 'react-icons/md';
import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
import { memo } from 'react';
const floatingGalleryButtonSelector = createSelector(
[activeTabNameSelector, uiSelector],
@ -58,4 +59,4 @@ const FloatingGalleryButton = () => {
) : null;
};
export default FloatingGalleryButton;
export default memo(FloatingGalleryButton);

3
invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
View File

@ -11,6 +11,7 @@ import {
} from 'features/ui/store/uiSelectors';
import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
import { isEqual } from 'lodash-es';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaSlidersH } from 'react-icons/fa';
@ -94,4 +95,4 @@ const FloatingParametersPanelButtons = () => {
) : null;
};
export default FloatingParametersPanelButtons;
export default memo(FloatingParametersPanelButtons);

30
invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
View File

@ -14,7 +14,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';
import { ReactNode, useMemo } from 'react';
import { memo, ReactNode, useMemo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { MdDeviceHub, MdGridOn } from 'react-icons/md';
import { activeTabIndexSelector } from '../store/uiSelectors';
@ -24,10 +24,10 @@ import { ResourceKey } from 'i18next';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import NodeEditor from 'features/nodes/components/NodeEditor';
import GenerateWorkspace from './tabs/Generate/GenerateWorkspace';
import { FaImage } from 'react-icons/fa';
import { createSelector } from '@reduxjs/toolkit';
import { BsLightningChargeFill, BsLightningFill } from 'react-icons/bs';
import { BsLightningChargeFill } from 'react-icons/bs';
import { configSelector } from 'features/system/store/configSelectors';
import { isEqual } from 'lodash';
export interface InvokeTabInfo {
id: InvokeTabName;
@ -35,10 +35,6 @@ export interface InvokeTabInfo {
workarea: ReactNode;
}
const tabIconStyles: ChakraProps['sx'] = {
boxSize: 6,
};
const tabs: InvokeTabInfo[] = [
{
id: 'generate',
@ -57,13 +53,19 @@ const tabs: InvokeTabInfo[] = [
},
];
const enabledTabsSelector = createSelector(configSelector, (config) => {
const { disabledTabs } = config;
const enabledTabsSelector = createSelector(
configSelector,
(config) => {
const { disabledTabs } = config;
return tabs.filter((tab) => !disabledTabs.includes(tab.id));
});
return tabs.filter((tab) => !disabledTabs.includes(tab.id));
},
{
memoizeOptions: { resultEqualityCheck: isEqual },
}
);
export default function InvokeTabs() {
const InvokeTabs = () => {
const activeTab = useAppSelector(activeTabIndexSelector);
const enabledTabs = useAppSelector(enabledTabsSelector);
const isLightBoxOpen = useAppSelector(
@ -160,4 +162,6 @@ export default function InvokeTabs() {
<TabPanels>{tabPanels}</TabPanels>
</Tabs>
);
}
};
export default memo(InvokeTabs);