Técnicas de UI: loaders, sticky e motion com propósito

Película na troca de rota, shimmer na lista, sticky com encapsulamento, scroll-margin sob header sticky, revelar sem layout jump.

Front-End

Que tipo de artigo é este? Técnicas que eu repito em listagens e fluxos longos: loading certo, sticky que gruda de verdade, motion que não empurra o layout.

Tese Pathname ≠ query. Sticky precisa alcançar o filho. Motion reserva espaço antes de revelar.

Pelicula versus shimmer — Figura 1 — Dois loaders, dois jobs.

const routeChange = pathnameChanged;
const queryOnly = searchChanged && !pathnameChanged;
if (routeChange) showNavigationFilm();
if (queryOnly) { tableSkeleton = true; scrollTop(); }

Sticky e scroll-margin

Em frameworks com encapsulamento, o SCSS da page pode não pintar th/td filhos — use o escape documentado do projeto (::ng-deep / equivalente) no wrapper. Ancestral com overflow-x: hidden também mata sticky horizontal. Conteúdo novo fora do viewport: visibility: hidden (reserva altura) → scrollIntoView → revelar no fim do scroll.

Tres passos de motion com proposito — Figura 2 — Reservar → scroll → revelar.

.section-target {
  scroll-margin-top: 14.5rem; /* header + breadcrumb + filtros sticky */
}
.reveal-enter {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s, transform 0.42s;
}

Loader de botão pode hug no spinner — se o fluxo pedir.
Border-beam / highlight: 1 loop e para — não loop infinito.
Modal paper: min-height 0 se o theme pack força 100dvh.

Sticky e scroll-margin

Continuar lendo