feat: skeletons where the page waits, no flicker while a sheet is read, repeated copies in the preview

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>

web/checkout.js

@@ -86,6 +86,11 @@
     rows.push(linha('Total', rs(approved.total_cents/100), 'tot'));
     resumo.replaceChildren(node('h4','Resumo do pedido'), ...rows);
   }
+  function esqueletoPagamento() {
+    const linhas=['skel skelLinha','skel skelLinha','skel skelLinha curta'].map(c=>node('div',null,c));
+    resumo.hidden=false; resumo.replaceChildren(node('h4','Resumo do pedido'),...linhas);
+    actions.replaceChildren(node('div',null,'skel skelLinha curta'),node('div',null,'skel skelBloco'));
+  }
   function semPedido() {
     pintaResumo(null);
     actions.replaceChildren();
@@ -259,6 +264,7 @@
     if (!naPagina()) { if (!go || !draftId) return; }
     else if (!draftId) { semPedido(); return; }
     const version=++refreshVersion, shownId=draftId;
+    if (naPagina() && !actions.children.length) esqueletoPagamento();
     try {
       await ready;
       const quote=await api('/quotes/'+shownId);
@@ -474,9 +480,10 @@
   async function showCard(approved, into, version, tipo) {
     const holder=node('div');
     holder.id='cardPaymentBrick';
-    into.append(holder);
+    const espera=node('div',null,'skel skelBloco');
+    into.append(espera,holder);
     try { await loadMercadoPago(); }
-    catch(error) { message(error.message); return; }
+    catch(error) { espera.remove(); message(error.message); return; }
     const session=await ready;
     // The customer may have switched to PIX, or the page re-rendered, meanwhile.
     if (!holder.isConnected || version!==refreshVersion) return;
@@ -493,7 +500,7 @@
         visual:{hideFormTitle:true,
           style:{customVariables:{baseColor:'#FFA81A',buttonTextColor:'#03060B'}}}},
       callbacks:{
-        onReady:()=>{},
+        onReady:()=>{ espera.remove(); },
         onError:error=>{ console.error(error); message('Erro no formulário do cartão. Confira os dados e tente de novo.'); },
         onSubmit:async data=>{
           if (!cartOk()) { await refresh(); throw new Error('cart changed'); }