PLACEHOLDER — Em produto financeiro, a interface não é a camada de apresentação: ela é o produto para quem usa. Um número exibido antes de estar confirmado não é uma otimização, é uma afirmação falsa.
PLACEHOLDER — O estado pendente é um estado de verdade
PLACEHOLDER — Skeleton não resolve: ele só esconde que você não sabe. O que funciona é mostrar o valor conhecido e marcar explicitamente o que ainda está em trânsito.
type BalanceState = | { status: "settled"; cents: number } | { status: "pending"; cents: number; inflight: number }; export function Balance({ state }: { state: BalanceState }) { return ( <p className="balance"> {formatBRL(state.cents)} {state.status === "pending" && <PendingBadge amount={state.inflight} />} </p> );}PLACEHOLDER — Arredondar é uma decisão de produto
PLACEHOLDER — Centavos importam porque o usuário confere. Trabalhe em inteiros e formate na borda — nunca guarde number de ponto flutuante representando dinheiro.
- PLACEHOLDER — armazene em centavos, inteiro
- PLACEHOLDER — formate só na renderização
- PLACEHOLDER — nunca some valores já formatados
PLACEHOLDER — Erro também é conteúdo
PLACEHOLDER — Um erro sem próximo passo é só um susto com tipografia melhor.
PLACEHOLDER — Todo estado de erro precisa de causa provável e ação. Se você não consegue escrever a ação, o erro está sendo tratado no lugar errado do sistema.