+
Loading...
{label && (
diff --git a/src/website/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx b/src/website/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx
index cc0ecee73b..3e092aef68 100644
--- a/src/website/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx
+++ b/src/website/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx
@@ -27,6 +27,7 @@ export default function WeightCoverImage({
height: `${height}px`,
width: `${width}px`,
minWidth: `${width}px`,
+ backgroundColor: src ? "#F3F4F6" : "",
};
let image = `/images/default-covers/${coverIndex || 0}.webp`;
diff --git a/src/website/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx b/src/website/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx
index 89930c2378..04aaae1e11 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx
@@ -24,6 +24,7 @@ import {
faArrowDownToLine,
faArrowRight,
} from "@fortawesome/pro-solid-svg-icons";
+import LoadingSpinner from "components/common/LoadingSpinner";
interface Props {
sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -79,6 +80,8 @@ function SessionTtsInferenceResultList(props: Props) {
if (!job.maybeResultToken) {
let cssStyle = "alert alert-secondary mb-0";
let stateDescription = "Pending...";
+ let loadingSpinner = null;
+ let percentage = job.progressPercentage;
switch (job.jobState) {
case JobState.PENDING:
@@ -87,6 +90,14 @@ function SessionTtsInferenceResultList(props: Props) {
job.maybeExtraStatusDescription == null
? t("resultsProgressPending")
: job.maybeExtraStatusDescription;
+ loadingSpinner = (
+
+ );
break;
case JobState.STARTED:
cssStyle = "alert alert-success mb-0";
@@ -94,12 +105,28 @@ function SessionTtsInferenceResultList(props: Props) {
job.maybeExtraStatusDescription == null
? t("resultsProgressStarted")
: job.maybeExtraStatusDescription;
+ loadingSpinner = (
+
+ );
break;
case JobState.ATTEMPT_FAILED:
cssStyle = "alert alert-danger mb-0";
stateDescription = `${t("resultsProgressFail", {
0: job.attemptCount || "0",
})}}`;
+ loadingSpinner = (
+
+ );
break;
case JobState.COMPLETE_FAILURE:
case JobState.DEAD:
@@ -116,7 +143,11 @@ function SessionTtsInferenceResultList(props: Props) {
results.push(
-
{stateDescription}
+
+ {loadingSpinner}
+ {stateDescription}
+ {percentage !== 0 && ` (${percentage}%)`}
+
);
} else {
diff --git a/src/website/packages/fakeyou.com/src/v2/view/_common/SessionVoiceConversionResultsList.tsx b/src/website/packages/fakeyou.com/src/v2/view/_common/SessionVoiceConversionResultsList.tsx
index a9b781e352..4f718f8942 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/_common/SessionVoiceConversionResultsList.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/_common/SessionVoiceConversionResultsList.tsx
@@ -24,6 +24,7 @@ import {
faArrowDownToLine,
faArrowRight,
} from "@fortawesome/pro-solid-svg-icons";
+import LoadingSpinner from "components/common/LoadingSpinner";
interface Props {
sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -79,6 +80,8 @@ function SessionVoiceConversionResultsList(props: Props) {
if (!job.maybeResultToken) {
let cssStyle = "alert alert-secondary mb-0";
let stateDescription = "Pending...";
+ let loadingSpinner = null;
+ let percentage = job.progressPercentage;
switch (job.jobState) {
case JobState.PENDING:
@@ -87,6 +90,14 @@ function SessionVoiceConversionResultsList(props: Props) {
job.maybeExtraStatusDescription == null
? t("resultsProgressPending")
: job.maybeExtraStatusDescription;
+ loadingSpinner = (
+
+ );
break;
case JobState.STARTED:
cssStyle = "alert alert-success mb-0";
@@ -94,12 +105,28 @@ function SessionVoiceConversionResultsList(props: Props) {
job.maybeExtraStatusDescription == null
? t("resultsProgressStarted")
: job.maybeExtraStatusDescription;
+ loadingSpinner = (
+
+ );
break;
case JobState.ATTEMPT_FAILED:
cssStyle = "alert alert-danger mb-0";
stateDescription = `${
(t("resultsProgressFail"), { 0: job.attemptCount || "0" })
}}`;
+ loadingSpinner = (
+
+ );
break;
case JobState.COMPLETE_FAILURE:
case JobState.DEAD:
@@ -116,10 +143,10 @@ function SessionVoiceConversionResultsList(props: Props) {
results.push(
-
-
+
+ {loadingSpinner}
+ {stateDescription}
+ {percentage !== 0 && ` (${percentage}%)`}
);