[TASK-542] Display automated transcription estimate #4873
Conversation
| import React from 'react'; | ||
| import styles from './bigSpinner.module.scss'; | ||
|
|
||
| /** Displays an animated blue spinner - for white backgrounds only. */ |
There was a problem hiding this comment.
Optional, but you could make this usable on non-white backgrounds using something like this for .bigSpinner:
mask-image: radial-gradient(circle, transparent $spinner-size - (4 * $spinner-line-size), black 33%);| if (estimateSeconds < 45) { | ||
| return t('less than a minute'); | ||
| } else if (estimateSeconds >= 45 && estimateSeconds < 75) { | ||
| return t('about 1 minute'); | ||
| } else if (estimateSeconds >= 75 && estimateSeconds < 150) { | ||
| return t('about 2 minutes'); | ||
| } else { | ||
| return t('about 3 minutes'); | ||
| } |
There was a problem hiding this comment.
I'm a little confused about the math here - the jumps between the different minutes seem inconsistent, and estimateSeconds doesn't seem to represent actual seconds. Is this based solely on the formula, or did you do some real-life testing to get these values?
This should probably also handle values greater than a hard-coded limit of 3 minutes - saying 'more than 3 minutes' would be okay if the estimateSeconds value grows inconsistently as the actual time taken goes up.
There was a problem hiding this comment.
This is coming from https://docs.google.com/spreadsheets/d/1zjOoGBuiHr8D0M9Ua6Oqe8ByKXo1kIIu/edit#gid=774040550. But I think I've read it incorrectly. Improved now :)
| export default function BigSpinner() { | ||
| return ( | ||
| <span className={styles.bigSpinner}/> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Does this need to be a separate component from <LoadingSpinner/>? The only real difference I see is the style/size of the spinner element/icon, and it's missing a label (visible or just ARIA-accessible), which <LoadingSpinner/> has. It might be worth considering adding this as a size option for <LoadingSpinner/> - or you could just give it some sort of accessible label.
There was a problem hiding this comment.
Didn't think about incorporating it into LoadingSpinner. Good idea. I ended up improving it in greater deal than just adding big version to it :)
# Conflicts: # jsapp/js/components/processing/transcript/stepConfigAuto.component.tsx
Checklist
Description
After user starts automated transcription, we now display an estimate and spinner.
Notes
Changes here:
bem.Loadingand cleaned up/refactoredLoadingSpinnercomponentLoadingSpinnerto storybookCenteredMessagecomponent (mainly as replacement for weird functionality inLoadingSpinnerthat I removed)getAttachmentForProcessingutility function to use it in multiple placesStepConfigAutofor transcript we now display a spinner and time estimatesecondsToTranscriptionEstimateandgetAudioDuration