blyzer/dtf-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: skeletons where the page waits, no flicker while a sheet is read, repeated copies in the preview
All checks were successful
Build and deploy / Validate source (push) Successful in 6s
Details
Build and deploy / Integration suite on a real stack (push) Successful in 2m30s
Details
Build and deploy / Secret scan and release gate (push) Successful in 5s
Details
Build and deploy / Publish images (push) Successful in 57s
Details

Browse Source 
Reading a large sheet repainted the list and "Sua folha" on every progress
step, so the preview flickered; progress now moves the bar in place and
"Sua folha" shows a skeleton until the preview is ready. A sheet printed
N times is shown N times (up to six, then a count). The payment page shows
skeletons while the order loads and until the card form is ready.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cauê Faleiros
2026-09-29 15:52:58 -03:00
parent 2b313a1cc8
commit 64e47ee481
5 changed files with 58 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/site-packing.js
View File

@@ -277,16 +277,32 @@ function previaAoVivo(){
const tot=folhaTotalM();
$('vMt').textContent = tot>0 ? fmtM(cobrar(tot))+' m' : '—';
const medidas=folhas.filter(x=>x.med);
const previews=folhas.filter(x=>x.previewSrc);
// Sheets still being read show a placeholder; a sheet printed N times is
// shown N times (up to REPETE_MAX, then a count).
const REPETE_MAX=6;
const previews=folhas.filter(x=>x.previewSrc || (x.pct!=null && x.med && x.med.grande));
if(previews.length){
const painel=document.createElement('div'); painel.className='folhaPrevias';
previews.forEach((x,index)=>{
const figura=document.createElement('figure'); figura.className='folhaPrevia';
const imagem=new Image(); imagem.src=x.previewSrc; imagem.alt=x.f.name;
const legenda=document.createElement('figcaption');
const vezes=Math.max(1,x.rep||1);
legenda.textContent=(previews.length>1 ? (index+1)+'. ' : '')+x.f.name+
(x.med ? ' · '+n1(x.med.larg)+' × '+n1(x.med.alt)+' cm' : '');
figura.append(imagem,legenda); painel.append(figura);
(x.med ? ' · '+n1(x.med.larg)+' × '+n1(x.med.alt)+' cm' : '')+(vezes>1 ? ' · '+vezes+' cópias' : '');
if(!x.previewSrc){
const esqueleto=document.createElement('div'); esqueleto.className='skel folhaSkel';
esqueleto.style.aspectRatio=x.med ? x.med.larg+' / '+Math.min(x.med.alt,x.med.larg*4) : '1 / 2';
esqueleto.append(Object.assign(document.createElement('span'),{textContent:'Gerando a prévia da folha…'}));
figura.append(esqueleto,legenda); painel.append(figura); return;
}
const pilha=document.createElement('div'); pilha.className='folhaPilha';
for(let k=0;k<Math.min(vezes,REPETE_MAX);k++){
const imagem=new Image(); imagem.src=x.previewSrc; imagem.alt=k? '' : x.f.name;
imagem.style.maxHeight=Math.floor(520/Math.min(vezes,REPETE_MAX))+'px'; pilha.append(imagem);
}
if(vezes>REPETE_MAX) pilha.append(Object.assign(document.createElement('div'),
{className:'folhaMais', textContent:'+ '+(vezes-REPETE_MAX)+' cópia'+(vezes-REPETE_MAX>1?'s':'')}));
figura.append(pilha,legenda); painel.append(figura);
});
$('vArea').replaceChildren(painel);
}else{