Paginación Progresiva & Infinite Scroll
Para interfaces densas en eventos temporales (como el visor de actividad de usuarios o timelines forenses), Mañuti implementa el patrón de Divulgación Progresiva (Progressive Disclosure) con desplazamiento infinito, consumiendo datos bajo demanda para mantener constante el consumo de memoria del cliente.
1. El Problema de la Saturación de Memoria
Renderizar 5 años de bitácora en una sola vista colapsa el motor de renderizado del navegador (DOM Tree). Dividir la información en bloques fijos de 20 elementos previene el bloqueo de la interfaz.
2. Implementación con IntersectionObserver
En lugar de escuchar el costoso evento window.onscroll (que satura la CPU con cientos de llamadas por segundo), el sistema utiliza la API nativa IntersectionObserver observando un elemento "centinela" invisible al pie de la lista:
<div id="timeline_feed" class="space-y-4">
<!-- Nodos inyectados dinámicamente -->
</div>
<!-- Elemento Centinela Invisible -->
<div id="scroll_sentinel" class="h-4 w-full"></div>
// resources/js/components/infinite-scroll.js
let currentPage = 1;
let isLoading = false;
let hasMorePages = true;
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !isLoading && hasMorePages) {
fetchNextBatch();
}
}, { threshold: 0.1 });
observer.observe(document.getElementById('scroll_sentinel'));
async function fetchNextBatch() {
isLoading = true;
const response = await fetch(`/api/audit/timeline?page=${currentPage}`);
const json = await response.json();
if (json.data.length === 0 || currentPage >= json.totalPages) {
hasMorePages = false;
observer.disconnect();
} else {
renderTimelineNodes(json.data);
currentPage++;
}
isLoading = false;
}