weight cover image background color fix / tts/vs job progress %

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 (
     <div
-      className={`pt-2 d-flex justify-content-center align-items-center overflow-hidden gap-3 ${
+      className={`d-flex justify-content-center align-items-center overflow-hidden gap-3 ${
         className ? className : ""
-      }`.trim()}
+      } ${padding ? "pt-2" : ""}`.trim()}
     >
-      <div className="spinner-border text-light" role="status">
+      <div
+        className="spinner-border"
+        role="status"
+        style={{ height: size, width: size, borderWidth: thin ? 2 : "0.25em" }}
+      >
         <span className="visually-hidden">Loading...</span>
       </div>
       {label && (

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`;

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 = (
+              <LoadingSpinner
+                className="fs-6"
+                padding={false}
+                thin={true}
+                size={16}
+              />
+            );
             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 = (
+              <LoadingSpinner
+                className="fs-6"
+                padding={false}
+                thin={true}
+                size={16}
+              />
+            );
             break;
           case JobState.ATTEMPT_FAILED:
             cssStyle = "alert alert-danger mb-0";
             stateDescription = `${t("resultsProgressFail", {
               0: job.attemptCount || "0",
             })}}`;
+            loadingSpinner = (
+              <LoadingSpinner
+                className="fs-6"
+                padding={false}
+                thin={true}
+                size={16}
+              />
+            );
             break;
           case JobState.COMPLETE_FAILURE:
           case JobState.DEAD:
@@ -116,7 +143,11 @@ function SessionTtsInferenceResultList(props: Props) {
 
         results.push(
           <div key={job.jobToken}>
-            <div className={cssStyle}>{stateDescription}</div>
+            <div className={`d-flex gap-2 ${cssStyle} fw-medium`.trim()}>
+              {loadingSpinner}
+              {stateDescription}
+              {percentage !== 0 && ` (${percentage}%)`}
+            </div>
           </div>
         );
       } else {

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 = (
+              <LoadingSpinner
+                className="fs-6"
+                padding={false}
+                thin={true}
+                size={16}
+              />
+            );
             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 = (
+              <LoadingSpinner
+                className="fs-6"
+                padding={false}
+                thin={true}
+                size={16}
+              />
+            );
             break;
           case JobState.ATTEMPT_FAILED:
             cssStyle = "alert alert-danger mb-0";
             stateDescription = `${
               (t("resultsProgressFail"), { 0: job.attemptCount || "0" })
             }}`;
+            loadingSpinner = (
+              <LoadingSpinner
+                className="fs-6"
+                padding={false}
+                thin={true}
+                size={16}
+              />
+            );
             break;
           case JobState.COMPLETE_FAILURE:
           case JobState.DEAD:
@@ -116,10 +143,10 @@ function SessionVoiceConversionResultsList(props: Props) {
 
         results.push(
           <div key={job.jobToken}>
-            <div>
-              <div>
-                <div className={cssStyle}>{stateDescription}</div>
-              </div>
+            <div className={`d-flex gap-2 ${cssStyle} fw-medium`.trim()}>
+              {loadingSpinner}
+              {stateDescription}
+              {percentage !== 0 && ` (${percentage}%)`}
             </div>
           </div>
         );