diff --git a/gui/src/components/LoadingCard.tsx b/gui/src/components/LoadingCard.tsx
index db3120bf..b0105673 100644
--- a/gui/src/components/LoadingCard.tsx
+++ b/gui/src/components/LoadingCard.tsx
@@ -11,12 +11,15 @@ import { POLL_TIME } from '../config.js';
import { ClientContext, ConfigContext, StateContext } from '../state.js';
const LOADING_PERCENT = 100;
+const LOADING_OVERAGE = 99;
export interface LoadingCardProps {
loading: ImageResponse;
}
export function LoadingCard(props: LoadingCardProps) {
+ const { steps } = props.loading.params;
+
const client = mustExist(React.useContext(ClientContext));
const { params } = mustExist(useContext(ConfigContext));
@@ -44,16 +47,33 @@ export function LoadingCard(props: LoadingCardProps) {
}
function getPercent() {
- const pct = getProgress() / props.loading.params.steps;
+ const progress = getProgress();
+ if (progress > steps) {
+ // steps was not complete, show 99% until done
+ return LOADING_OVERAGE;
+ }
+
+ const pct = progress / steps;
return Math.ceil(pct * LOADING_PERCENT);
}
+ function getTotal() {
+ const progress = getProgress();
+ if (progress > steps) {
+ // steps was not complete, show 99% until done
+ return 'many';
+ }
+
+ return steps.toFixed(0);
+ }
+
function getReady() {
return doesExist(ready.data) && ready.data.ready;
}
function renderProgress() {
- if (getProgress() > 0) {
+ const progress = getProgress();
+ if (progress > 0 && progress <= steps) {
return ;
} else {
return ;
@@ -90,7 +110,7 @@ export function LoadingCard(props: LoadingCardProps) {
sx={{ alignItems: 'center' }}
>
{renderProgress()}
- {getProgress()}/{props.loading.params.steps} steps
+ {getProgress()}/{getTotal()} steps