Forge success label and real progress bar tied to server compile stages.
Some checks failed
CI Docker Mining Proof / Linux agent hashrate proof (push) Has been cancelled
Some checks failed
CI Docker Mining Proof / Linux agent hashrate proof (push) Has been cancelled
Replace Dispensed with Forged in the reveal modal, poll builder/progress with indeterminate-until-first-byte UX, and emit interpolated compile progress during long garble builds.
This commit is contained in:
47
server/web/src/components/Forge/ForgeProgressBar.tsx
Normal file
47
server/web/src/components/Forge/ForgeProgressBar.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
export const FORGE_INITIAL_STAGE = 'Initializing forge...';
|
||||
|
||||
interface Props {
|
||||
building: boolean;
|
||||
stage: string;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
/** True while waiting for the first server-reported forge stage. */
|
||||
export function isForgeProgressIndeterminate(stage: string, progress: number): boolean {
|
||||
return progress === 0 && (stage === '' || stage === FORGE_INITIAL_STAGE);
|
||||
}
|
||||
|
||||
export default function ForgeProgressBar({ building, stage, progress }: Props) {
|
||||
if (!building) return null;
|
||||
|
||||
const indeterminate = isForgeProgressIndeterminate(stage, progress);
|
||||
const displayStage = stage || 'Initializing...';
|
||||
const pctLabel = indeterminate ? '…' : `${Math.round(progress)}%`;
|
||||
|
||||
return (
|
||||
<div className="forge-progress-wrap" aria-live="polite">
|
||||
<div className="forge-progress-header">
|
||||
<span className="forge-progress-icon">⚙</span>
|
||||
<span className="forge-progress-stage">{displayStage}</span>
|
||||
<span className="forge-progress-pct">{pctLabel}</span>
|
||||
</div>
|
||||
<div
|
||||
className={`forge-progress-track${indeterminate ? ' indeterminate' : ''}`}
|
||||
role="progressbar"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-valuenow={indeterminate ? undefined : Math.round(progress)}
|
||||
aria-busy={indeterminate}
|
||||
aria-label={displayStage}
|
||||
>
|
||||
<div
|
||||
className="forge-progress-fill"
|
||||
style={indeterminate ? undefined : { width: `${progress}%` }}
|
||||
/>
|
||||
{!indeterminate && (
|
||||
<div className="forge-progress-glow" style={{ left: `${progress}%` }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user