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): extract FetchingModelsLoader into reusable component

Browse Source
This commit is contained in:
psychedelicious 2024-03-19 15:58:04 +11:00
parent bc12ca9220
commit e8f4012b56
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/FetchingModelsLoader.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Flex, Spinner, Text } from '@invoke-ai/ui-library';
import { memo } from 'react';
export const FetchingModelsLoader = memo(({ loadingMessage }: { loadingMessage?: string }) => {
return (
<Flex flexDirection="column" gap={4} borderRadius="base" p={4} bg="base.800">
<Flex justifyContent="center" alignItems="center" flexDirection="column" p={4} gap={8}>
<Spinner />
<Text variant="subtext">{loadingMessage ? loadingMessage : 'Fetching...'}</Text>
</Flex>
</Flex>
);
});
FetchingModelsLoader.displayName = 'FetchingModelsLoader';

15
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelList.tsx
View File

@ -1,4 +1,4 @@
import { Flex, Spinner, Text } from '@invoke-ai/ui-library';
import { Flex } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { memo, useMemo } from 'react';
@ -13,6 +13,7 @@ import {
} from 'services/api/hooks/modelsByType';
import type { AnyModelConfig, ModelType } from 'services/api/types';
import { FetchingModelsLoader } from './FetchingModelsLoader';
import { ModelListWrapper } from './ModelListWrapper';
const ModelList = () => {
@ -121,15 +122,3 @@ const modelsFilter = <T extends AnyModelConfig>(
});
};
const FetchingModelsLoader = memo(({ loadingMessage }: { loadingMessage?: string }) => {
return (
<Flex flexDirection="column" gap={4} borderRadius="base" p={4} bg="base.800">
<Flex justifyContent="center" alignItems="center" flexDirection="column" p={4} gap={8}>
<Spinner />
<Text variant="subtext">{loadingMessage ? loadingMessage : 'Fetching...'}</Text>
</Flex>
</Flex>
);
});
FetchingModelsLoader.displayName = 'FetchingModelsLoader';