Arquitetura e Fluxo

Visao geral

A Home usa um componente Vue para galeria (NfsImageGridHome.vue) e um controller backend (ImageController) para entregar metadados e URLs de midia.

Fluxo resumido:

1. Componente entra na viewport.
2. Front chama GET /caroulsel/data.
3. Backend consulta EntryPoint 400 e normaliza itens.
4. Backend retorna itens leves (sem base64 no JSON), com previewUrl e fullUrl.
5. Front renderiza cards e carrega thumbs por URL.
6. Cada card remove skeleton quando imagem do proprio card termina de carregar.

Lazy loading por viewport

O carregamento nao acontece no mounted diretamente em todos os casos.
Ele usa IntersectionObserver para disparar a busca quando a galeria realmente fica visivel.

Beneficios:

• reduz requests antecipadas;
• melhora tempo de interacao inicial da Home;
• evita custo em secoes que usuario talvez nem veja.

Comportamento de UX

Fase 1 - carregamento inicial dos dados

• exibe loader unico centralizado ("Buscando imagens...");
• ainda nao desenha grade final.

Fase 2 - itens recebidos da API

• desenha grade com quantidade real de itens retornados;
• cada item inicia com skeleton overlay local;
• skeleton do item sai apenas no load (ou fallback de seguranca) da imagem.

Camadas tecnicas

• Frontend: resources/assets/js/components/gallery/NfsImageGridHome.vue
• Controller API: app/http/controllers/ImageController.php
• Cache de midia: app/services/HomeGalleryMediaCacheService.php
• Rotas: setup/routes.php
• Template Home: resources/views/home/home.twig

Diagrama simples

Viewport -> NfsImageGridHome -> GET /caroulsel/data
                               -> EntryPoint(400)
                               -> itens normalizados (previewUrl/fullUrl)
                               <- JSON leve
NfsImageGridHome -> <img src="/caroulsel/media/{token}/thumb">
                  -> GET /caroulsel/media/{token}/thumb
                  <- binario da imagem
                  -> remove skeleton do card