/* Espera: as patinhas que andam enquanto o sistema trabalha. * * Regra da casa: onde o Vetrx faz alguém esperar, aparece um cachorro * atravessando a tela — nunca um círculo girando. O componente é o mesmo nos * três lugares (barra de navegação, botão, bolha do chat); o que muda é o * tamanho e onde ele é ancorado. * * Markup em app/views/compartilhado/_carregando.html.erb. * Quem o coloca na tela: app/javascript/controllers/carregando_controller.js. */ /* ---- a barra azul do Turbo sai de cena ---------------------------------- * * O Turbo injeta o estilo padrão dele como PRIMEIRO filho do ; esta * folha vem depois, então a regra abaixo ganha sem `!important`. `visibility`, * e não `display`, porque é o desligamento que o handbook do Turbo documenta — * o elemento continua existindo e o Turbo continua medindo o que sempre mediu, * só não pinta. Quem avisa a espera agora é `.carregando--barra`. */ .turbo-progress-bar { visibility: hidden; } /* ---- a caminhada -------------------------------------------------------- */ .carregando { display: inline-flex; align-items: center; /* Um passo a cada 200ms: mais rápido vira estroboscópio, mais lento vira travamento. O ciclo inteiro é o passo vezes as quatro pegadas. */ --passo: 200ms; --pata: 18px; --vao: 5px; } .carregando--pequeno { --pata: 13px; --vao: 3px; } .carregando--medio { --pata: 18px; --vao: 5px; } .carregando--grande { --pata: 26px; --vao: 8px; } .carregando__trilha { display: inline-flex; align-items: center; gap: var(--vao); /* Folga vertical para o desvio das pegadas: sem ela, a de baixo é cortada dentro do botão. */ height: calc(var(--pata) * 1.5); } /* Cada pegada começa apagada e só acende quando chega a vez dela — sem isto, as quatro aparecem juntas no primeiro quadro e a caminhada começa errada. */ .carregando__passo { display: block; width: var(--pata); height: var(--pata); opacity: 0; animation: carregando-pisada calc(var(--passo) * 4) linear infinite; } .carregando__passo:nth-child(1) { animation-delay: 0ms; } .carregando__passo:nth-child(2) { animation-delay: var(--passo); } .carregando__passo:nth-child(3) { animation-delay: calc(var(--passo) * 2); } .carregando__passo:nth-child(4) { animation-delay: calc(var(--passo) * 3); } /* Esquerda e direita: a pegada ímpar sobe e inclina para um lado, a par desce, espelha e inclina para o outro. É o desalinho que faz ler como bicho andando; quatro pegadas iguais em fila lêem como régua. */ .carregando__passo:nth-child(odd) .carregando__pata { transform: translateY(-15%) rotate(-13deg); } .carregando__passo:nth-child(even) .carregando__pata { transform: translateY(15%) rotate(13deg) scaleX(-1); } .carregando__pata { display: block; width: 100%; height: 100%; /* A cor vem de quem hospeda: branco no botão coral, verde no cartão. */ fill: currentColor; } /* O rastro nunca zera: quando a quarta acende (t = 3 passos), a primeira já está em 84% do ciclo dela, apagando. Se todas apagassem juntas para recomeçar, o olho leria falha e não caminhada. */ @keyframes carregando-pisada { 0% { opacity: 0; transform: translateY(20%) scale(0.72); } 9% { opacity: 1; transform: translateY(0) scale(1); } 30% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 0.34; transform: translateY(-5%) scale(0.97); } 96% { opacity: 0; transform: translateY(-9%) scale(0.94); } 100% { opacity: 0; transform: translateY(20%) scale(0.72); } } /* Dito para quem ouve a tela, escondido de quem a vê: as pegadas já dizem tudo no visual, e um "Carregando…" escrito ao lado delas é redundância. */ .carregando__texto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- onde ela aparece --------------------------------------------------- */ /* Navegação: no lugar da barra do Turbo, uma pastilha no alto da tela. Só entra depois de meio segundo (o atraso é do JS) — patinha piscando a cada clique rápido é poluição, não informação. */ .carregando--barra { position: fixed; top: var(--spacing-12); left: 50%; z-index: 2147483000; transform: translateX(-50%); padding: 2px var(--spacing-16); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-tags); box-shadow: var(--shadow-subtle); color: var(--color-canopy-green); animation: carregando-chega 160ms ease-out; } @keyframes carregando-chega { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Botão que envia: a capa é montada pelo JS em volta do botão que já existe. As patinhas ficam POR CIMA, em camada própria — dentro não dá, porque o caso mais visível ("Montar o pedido") é um , que não tem filhos. */ .carregando-capa { position: relative; display: inline-flex; } /* O rótulo some, a caixa fica de pé: trocar o texto do botão por patinhas mudaria a largura dele e a tela pularia no meio do envio. */ .carregando-capa > :not(.carregando) { color: transparent; } /* O Turbo desliga o botão enquanto envia e o `opacity: .45` do sistema apagaria as patinhas junto — mas quem está dizendo "espere" agora são elas, e elas precisam de contraste. */ .carregando-capa > :not(.carregando)[disabled] { opacity: 1; } .carregando--sobreposto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* Num botão estreito — o redondo de 40px do chat, por exemplo — a trilha é mais larga que a caixa. Recortada, ela lê como cachorro passando por trás do botão; transbordando, lê como defeito. O raio vem do botão, pelo JS. */ overflow: hidden; /* O clique continua sendo do botão que está embaixo. */ pointer-events: none; } /* Chat do pedido: a bolha da resposta que ainda não chegou. Ela nasce no lugar exato onde o texto do agente vai aparecer, então a fala não "salta" de lugar quando chega. */ .fala--esperando { align-items: flex-start; } .fala--esperando .fala__texto { display: inline-flex; align-items: center; min-height: 22px; color: var(--color-canopy-green); } /* ---- quem pediu menos movimento ----------------------------------------- * * Sem caminhada: uma pegada só, respirando devagar. Vale lembrar que aqui não * dá para simplesmente desligar a animação — sem sinal nenhum, a pessoa não * sabe se o sistema está trabalhando ou se travou. */ @media (prefers-reduced-motion: reduce) { .carregando__passo:not(:first-child) { display: none; } .carregando__passo:first-child { opacity: 1; animation: carregando-respira 2.4s ease-in-out infinite; } .carregando__passo:first-child .carregando__pata { transform: none; } .carregando--barra { animation: none; } @keyframes carregando-respira { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } }