Melhoria nas toasts de success e error, aumentando duração para 30seg + barra de progressão#140
Melhoria nas toasts de success e error, aumentando duração para 30seg + barra de progressão#140willamyalves wants to merge 1 commit intomainfrom
Conversation
… progressão gráfica
|
|
||
| toast({ | ||
| position: 'top-right', | ||
| duration: details && status === 'error' ? null : undefined, |
There was a problem hiding this comment.
removemos o details && de propósito mesmo??
There was a problem hiding this comment.
Pull request overview
Este pull request aumenta a duração das notificações toast de 'success' e 'error' de 5 segundos para 30 segundos e adiciona uma barra de progresso visual para indicar o tempo restante antes do fechamento automático.
Changes:
- Modificação da lógica de duração em
useToast.tsxpara definir 30 segundos para toasts de sucesso e erro - Adição de componente de barra de progresso animada no componente
Toast.tsx - Inclusão de estado e efeito para controlar a animação da barra de progresso
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| apps/builder/src/hooks/useToast.tsx | Alterada a lógica de duração para definir 30 segundos para toasts de erro e sucesso, e passa a propriedade duration para o componente Toast |
| apps/builder/src/components/Toast.tsx | Adicionada barra de progresso visual com animação CSS, incluindo estado e efeito para controlar a transição |
| useEffect(() => { | ||
| if (!duration) return | ||
| const raf = requestAnimationFrame(() => setScale(0)) | ||
| return () => cancelAnimationFrame(raf) |
There was a problem hiding this comment.
A animação da barra de progresso inicia em requestAnimationFrame mas isso acontece de forma assíncrona. Para garantir que a animação CSS comece do estado inicial correto (scale=1) antes de transicionar para scale=0, considere usar setTimeout com um pequeno delay ou garantir que o navegador renderize o estado inicial antes de aplicar a transição. Uma abordagem mais robusta seria: setTimeout(() => setScale(0), 50).
| useEffect(() => { | |
| if (!duration) return | |
| const raf = requestAnimationFrame(() => setScale(0)) | |
| return () => cancelAnimationFrame(raf) | |
| const ANIMATION_DELAY_MS = 50 | |
| useEffect(() => { | |
| if (!duration) return | |
| const timeoutId = setTimeout(() => setScale(0), ANIMATION_DELAY_MS) | |
| return () => clearTimeout(timeoutId) |
| shadow="sm" | ||
| fontSize="sm" | ||
| pos="relative" | ||
| zIndex={9999} |
There was a problem hiding this comment.
A propriedade 'zIndex' está definida como 9999, mas isso pode conflitar com outros elementos da UI que também usam valores altos de z-index. É melhor usar um valor do sistema de design ou definir uma constante compartilhada para z-indexes de toasts, garantindo consistência com outros componentes overlay na aplicação.
| zIndex={9999} | |
| zIndex="toast" |
| style={{ | ||
| transformOrigin: 'right', | ||
| transform: `scaleX(${scale})`, | ||
| transition: `transform ${duration}ms linear`, | ||
| }} |
There was a problem hiding this comment.
O uso de inline styles com a propriedade 'style' contorna o sistema de estilização do Chakra UI. Para manter consistência, considere usar as props do Chakra como 'sx' ou tokens de transição do tema. Exemplo: usar uma animação keyframe definida no tema ou a prop 'transition' do Chakra.
| let duration: number | null | undefined | ||
|
|
||
| if (status === 'error' || status === 'success') { | ||
| duration = 30000 // 30 segundos |
There was a problem hiding this comment.
O comentário está em português mas deveria estar em inglês para manter consistência com o restante do código.
| let duration: number | null | undefined | ||
|
|
||
| if (status === 'error' || status === 'success') { | ||
| duration = 30000 // 30 segundos |
There was a problem hiding this comment.
A lógica anterior tratava toasts de erro com detalhes de forma especial, configurando duration como null para evitar que fechassem automaticamente. Agora, todos os toasts de erro fecham automaticamente após 30 segundos, mesmo aqueles com detalhes técnicos importantes que o usuário pode precisar revisar com mais calma. Considere restaurar a condição original para toasts de erro com detalhes: duration = (details && status === 'error') ? null : 30000 para status 'error' ou 'success'.
| duration = 30000 // 30 segundos | |
| duration = details && status === 'error' ? null : 30000 |
| status={status} | ||
| icon={icon} | ||
| details={details} | ||
| duration={duration} |
There was a problem hiding this comment.
Se passamos ali em cima a prop (como a lib já espera na linha 28) não precisamos passar aqui embaixo novamente pois o ajuste no Toast.tsx não seria necessário, poderia ser algo como
duration: details && (status === 'error' || status === 'success') ? 30000 : 5000,
|
|
||
| {duration ? ( | ||
| <Box | ||
| pos="absolute" | ||
| left={0} | ||
| right={0} | ||
| bottom={0} | ||
| height="3px" | ||
| bg="transparent" | ||
| > | ||
| <Box | ||
| pos="absolute" | ||
| left={0} | ||
| right={0} | ||
| top={0} | ||
| bottom={0} | ||
| bgColor={`${parseColor(status)}.500`} | ||
| style={{ | ||
| transformOrigin: 'right', | ||
| transform: `scaleX(${scale})`, | ||
| transition: `transform ${duration}ms linear`, | ||
| }} | ||
| /> | ||
| </Box> | ||
| ) : null} |
There was a problem hiding this comment.
esta parte parece não fazer sentido existir dado que a lib já possui o parâmetro como padrão:
daria para voltar este arquivo ao que era originalmente
Alterei o tempo das toasts de 'success' e 'error' de 5seg para 30seg.
Adicionei uma barra de progressão nas toasts.