diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx
index 964822aa55..f399ada862 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx
@@ -287,8 +287,8 @@ export const ModelInstallQueue = memo(() => {
{data?.length === 0 ? (
- |
- {t('modelManager.queueEmpty')}
+ |
+ {t('modelManager.queueEmpty')}
|
) : (
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx
index a859b97e95..aacf192edf 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx
@@ -1,5 +1,18 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Badge, Button, CircularProgress, Flex, Icon, IconButton, Td, Text, Tooltip, Tr } from '@invoke-ai/ui-library';
+import {
+ Badge,
+ Box,
+ Button,
+ CircularProgress,
+ Flex,
+ Icon,
+ IconButton,
+ Td,
+ Text,
+ Tooltip,
+ Tr,
+} from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
import { isNil } from 'es-toolkit/compat';
import { getApiErrorDetail } from 'features/modelManagerV2/util/getApiErrorDetail';
import { toast } from 'features/toast/toast';
@@ -11,6 +24,7 @@ import {
PiMinusBold,
PiPauseFill,
PiPlayFill,
+ PiWarningBold,
PiWarningDiamondBold,
PiWarningFill,
PiXBold,
@@ -23,6 +37,7 @@ import {
useResumeModelInstallMutation,
} from 'services/api/endpoints/models';
import type { ModelInstallJob } from 'services/api/types';
+import { $isConnected } from 'services/events/stores';
import { ModelInstallQueueBadge } from './ModelInstallQueueBadge';
@@ -84,6 +99,7 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => {
const [restartFailedModelInstall] = useRestartFailedModelInstallMutation();
const [restartModelInstallFile] = useRestartModelInstallFileMutation();
const resumeFromScratchShown = useRef(false);
+ const isConnected = useStore($isConnected);
const handleDeleteModelImport = useCallback(() => {
deleteImportModel(installJob.id)
@@ -312,6 +328,10 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => {
installJob.status === 'running' ||
installJob.status === 'paused';
+ const showDisconnectedIndicator =
+ !isConnected &&
+ (installJob.status === 'downloading' || installJob.status === 'waiting' || installJob.status === 'running');
+
return (
{/* Progress */}
@@ -323,7 +343,10 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => {
size="20px"
value={progressValue ?? 0}
isIndeterminate={
- progressValue === null || installJob.status === 'waiting' || installJob.status === 'running'
+ !isConnected ||
+ progressValue === null ||
+ installJob.status === 'waiting' ||
+ installJob.status === 'running'
}
aria-label={t('accessibility.invokeProgressBar')}
sx={CircularProgressSx}
@@ -399,10 +422,19 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => {
{/* Status */}
|
+ {showDisconnectedIndicator && (
+
+
+
+
+
+ )}
{hasRestartRequired && (
- {t('modelManager.restartRequired')}
+
+ {t('modelManager.restartRequired')}
+
)}
|