Page Load Progress
Bloquea la pantalla y muestra un indicador de carga cuando los usuarios envían formularios que desencadenan tareas que consumen tiempo, previniendo dobles clics accidentales y mejorando la experiencia de usuario.
page_load_progress
Instalar
composer require 'drupal/page_load_progress:^2.0'
Overview
Page Load Progress es un módulo de mejora de interfaz de usuario que proporciona retroalimentación visual durante las cargas de página y los envíos de formularios. Cuando un usuario hace clic en un botón de envío o navega mediante enlaces internos, el módulo puede mostrar una superposición de pantalla completa con un indicador giratorio para indicar claramente que una tarea está siendo procesada.
Este comportamiento ayuda a prevenir que los usuarios hagan clic múltiples veces mientras esperan una respuesta, lo que puede causar envíos duplicados o fallos en la ejecución de tareas, especialmente cuando se trabaja con servicios web u operaciones complejas. El bloqueo de pantalla asegura que los usuarios entiendan que su acción está siendo procesada y les impide desencadenar acciones adicionales inadvertidamente.
El módulo ofrece control granular sobre cuándo y dónde aparece el indicador a través de condiciones de visibilidad basadas en rutas URL, retrasos configurables antes de mostrar el indicador, y la opción de habilitar la tecla ESC para desbloqueo manual.
Features
- Muestra una superposición de pantalla completa con un indicador animado durante los envíos de formularios y las cargas de página
- Retraso configurable antes de mostrar el indicador (inmediatamente, 1 segundo, 3 segundos o 5 segundos)
- Condiciones de visibilidad basadas en rutas para mostrar u ocultar el indicador en páginas específicas usando patrones con comodines
- Soporte opcional para navegación mediante enlaces internos además de los envíos de formularios
- Soporte de la tecla ESC para permitir a los usuarios cerrar manualmente el indicador si es necesario
- Exclusión automática de formularios y elementos basados en Ajax para prevenir conflictos con modales y contenido dinámico
- Detección inteligente para evitar el bloqueo cuando los enlaces se abren en nuevas pestañas, dentro de modales, o tienen manejadores Ajax
Use Cases
Envíos de formularios de larga duración
Cuando los usuarios envían formularios que desencadenan operaciones que consumen tiempo como enviar correos electrónicos, procesar pagos, generar informes o sincronizar con servicios externos, el indicador previene confusión y envíos duplicados al indicar claramente que la acción está en progreso.
Operaciones de gestión de contenido
Durante la creación o edición de contenido que involucra procesamiento complejo como manipulación de imágenes, actualizaciones de taxonomía o transiciones de flujo de trabajo, el indicador de carga tranquiliza a los editores de contenido de que sus cambios están siendo guardados.
Operaciones de importación/exportación
Al ejecutar importaciones de datos, exportaciones o migraciones a través de la interfaz de administración, el bloqueo de pantalla previene que los administradores naveguen a otra página o desencadenen operaciones duplicadas mientras el proceso se completa.
Flujos de pago en comercio electrónico
Durante los procesos de pago donde ocurre el procesamiento de pagos, el indicador previene que los clientes hagan clic en enviar múltiples veces, lo que podría resultar en cargos duplicados o fallos en la creación de pedidos.
Integración con APIs externas
Cuando los formularios interactúan con servicios web externos que pueden tener tiempos de respuesta variables, el indicador de carga establece expectativas apropiadas para el usuario y previene errores relacionados con tiempos de espera.
Tips
- Otorga el permiso 'Use Page Load Progress' solo a los roles que se beneficiarán de la función, como usuarios autenticados o administradores
- Usa la opción de retraso de 3-5 segundos para evitar mostrar el indicador en cargas de página rápidas, proporcionando una experiencia más fluida
- Configura la visibilidad por rutas para excluir páginas con muchas interacciones Ajax o diálogos modales
- Mantén la opción de la tecla ESC habilitada para dar a los usuarios una vía de escape si algo sale mal
- El módulo excluye automáticamente las páginas de Views UI (/admin/structure/views/) para prevenir conflictos con la funcionalidad de vista previa de Views
- Cuando uses la opción de enlaces internos, ten en cuenta que los enlaces externos y los enlaces con atributos target se excluyen automáticamente
- Los temas personalizados pueden sobrescribir el CSS para personalizar la apariencia de la superposición y la animación del indicador
Technical Details
Admin Pages 1
/admin/config/user-interface/page-load-progress
Configura el comportamiento del módulo Page Load Progress, incluyendo cuándo aparece el indicador de carga, las condiciones de visibilidad por ruta y las opciones de escape del usuario.
Permisos 2
Hooks 2
hook_page_attachments
Se usa para adjuntar la biblioteca page_load_progress y los ajustes de Drupal a las páginas donde el usuario tiene el permiso 'use page load progress' y se cumplen las condiciones de visibilidad.
template_preprocess_input
Agrega la clase CSS 'page-load-progress-submit' a los botones de envío que no están habilitados para Ajax, permitiendo que el JavaScript identifique qué elementos deberían activar el indicador.
Troubleshooting 5
Verifica que el rol de usuario tenga el permiso 'Use Page Load Progress'. Comprueba que el formulario no esté usando Ajax (el módulo excluye automáticamente los formularios Ajax). Asegúrate de que la ruta de la página no esté excluida por las condiciones de visibilidad.
Habilita la opción de la tecla ESC para permitir a los usuarios cerrar la superposición manualmente. Esto puede ocurrir si hay errores de JavaScript que impiden que la página se recargue o si la respuesta del servidor se retrasa.
El módulo intenta evitar conflictos con modales, pero si los problemas persisten, usa las condiciones de visibilidad para excluir páginas con funcionalidad modal o asegúrate de que los enlaces modales tengan clases apropiadas que los distingan de los enlaces regulares.
Asegúrate de que los enlaces habilitados para Ajax tengan la clase 'use-ajax' o 'webform-ajax-link'. El módulo verifica estas clases y las excluye de activar el indicador.
El módulo solo se activa en enlaces que comienzan con '/'. Sin embargo, algunas URLs internas absolutas podrían tratarse de manera diferente. Considera usar rutas relativas o agregar exclusiones específicas basadas en clases.
Security Notes 3
- El módulo respeta el sistema de permisos de Drupal - solo los usuarios con el permiso 'use page load progress' verán el indicador de carga
- El permiso 'administer page load progress' debe otorgarse cuidadosamente ya que permite la modificación del comportamiento del módulo en todo el sitio
- La configuración del selector CSS (page_load_progress_elements) solo puede modificarse mediante sobrescritura de gestión de configuración, no a través de la interfaz de usuario, previniendo posibles problemas de inyección