diff --git a/src/website/packages/fakeyou.com/src/components/common/LoadingSpinner/LoadingSpinner.tsx b/src/website/packages/fakeyou.com/src/components/common/LoadingSpinner/LoadingSpinner.tsx index d306bd722b..bcde98d5f3 100644 --- a/src/website/packages/fakeyou.com/src/components/common/LoadingSpinner/LoadingSpinner.tsx +++ b/src/website/packages/fakeyou.com/src/components/common/LoadingSpinner/LoadingSpinner.tsx @@ -4,20 +4,30 @@ interface LoadingSpinnerProps { className?: string; label?: string; labelClassName?: string; + size?: number; + padding?: boolean; + thin?: boolean; } export default function LoadingSpinner({ className, label, labelClassName, + size = 36, + padding = true, + thin = false, }: LoadingSpinnerProps) { return (
-
+
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(
-
-
-
{stateDescription}
-
+
+ {loadingSpinner} + {stateDescription} + {percentage !== 0 && ` (${percentage}%)`}
);