Better progress bar UI

This commit is contained in:
Nikita 2025-10-24 20:55:39 +03:00
parent fc74dcdb1a
commit 91ebdd5ea6

View file

@ -199,7 +199,7 @@ export default function ExportModal(Props) {
disabled={exporting} disabled={exporting}
onClick={async () => { onClick={async () => {
setExporting(true); setExporting(true);
setTimeout(refreshProgress, 1000); setTimeout(refreshProgress, 2000);
await handleExport(startCycle, endCycle, sampleRate, maxPolyphony, multiChannelOrbits, downloadName) await handleExport(startCycle, endCycle, sampleRate, maxPolyphony, multiChannelOrbits, downloadName)
.then(() => { .then(() => {
const modal = document.getElementById('exportModal'); const modal = document.getElementById('exportModal');
@ -212,13 +212,13 @@ export default function ExportModal(Props) {
}); });
}} }}
> >
<span className="text-foreground">{exporting ? 'Exporting...' : 'Export to WAV'}</span>
<div <div
className="bg-foreground opacity-10 absolute top-0 left-0 right-0 bottom-0" className="absolute top-0 left-0 right-0 bottom-0 backdrop-invert"
style={{ style={{
width: `${(progress / length) * 100}%`, width: `${(exporting ? 1 : 0) + (progress / length) * 99}%`
}} }}
/> />
<span className="text-foreground">{exporting ? 'Exporting...' : 'Export to WAV'}</span>
</button> </button>
</div> </div>
</dialog> </dialog>