[Planner] Añadir indicador de que la página está cargando #871
Conversation
EmilioCristalli
left a comment
EmilioCristalli
left a comment
There was a problem hiding this comment.
creo que visualmente no es ideal, pero igual es mejor que no mostrar nada (como tenemos ahora).
me parece que en el home hace tiempo hacíamos algo similar, de mostrar un div que cubriera todo, y después lo mejoramos a mostrar un spinner en las cosas que se deshabilitaban. Capaz se puede explorar algo similar acá
| foregroundLayer.addEventListener("click", function(event) { | ||
| event.preventDefault(); | ||
| }); |
There was a problem hiding this comment.
para qué es esto?
el div de por sí no atrapa ya los click y por lo tanto no les llega a los botones de abajo?
There was a problem hiding this comment.
Me fijo! Puede ser que no sea necesario, no
|
|
||
| export default class extends Controller { | ||
| start() { | ||
| var foregroundLayer = document.createElement("div"); |
There was a problem hiding this comment.
opiniones sobre poner este div derecho en el html con hidden y acá solo hacerlo visible (sacarle la clase)?
y después supongo que habrá que ponerle la clase de nuevo cuando termine el request, o remplazar el div entero con turbo_stream.replace
There was a problem hiding this comment.
Lo pensé, si! Voy a probar a ver cómo queda
| ) %> | ||
| <%= form.hidden_field :semester, value: semester %> | ||
| <%= form.button type: :submit, class: "cursor-pointer py-2 ps-3 material-icons text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed", disabled: true, data: { subject_selector_target: "submitButton" } do %> | ||
| <%= form.button type: :submit, class: "cursor-pointer py-2 ps-3 material-icons text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed", disabled: true, data: { subject_selector_target: "submitButton", action: "planner-loading#start" } do %> |
There was a problem hiding this comment.
otra opción capaz puede ser poner data-action="turbo:submit-start->planner-loading#start" en el div#planner
creo que no serviría para el drag and drop, pero capaz se puede hacer algo para que lo incluya.
Y también incluiría otros request con turbo adentro del div, no sé si tenemos algún otro
There was a problem hiding this comment.
Pruebo!
There was a problem hiding this comment.
Y también incluiría otros request con turbo adentro del div, no sé si tenemos algún otro
Ahora tenemos el de agregar semestre, por lo que habría que actualizar el turbo_stream para que oculte de nuevo el foreground layer.
Dado eso y que, como bien decís, con este aproach no se incluye el drag and drop, yo creo que prefiero la especificidad de cómo está ahora.
Qué te parece?
Exacto! De ahí es donde saqué la idea y mucha parte del código 😄
De acuerdo con esto 🙂 |
… not-planned-and-approved subjects list
Motivación
Cuando añadís o removes materias o las cambiás de semestre, no queda tan claro de que hay algo que está cargando por abajo y pareciera que se pudiera seguir usando la app, cuando de repente se actualizan los semestres porque se completó el request.
La idea es darles a los usuarios una forma clara de entender que la página está cargando.
Detalles
Este PR agrega funcionalidad para que al agregar, remover o mover una materia en el planificador, aparezca un 'foreground layer' para indicarles a los usuarios de que la página está cargando.
Quizás no es la mejor solución, pero es una solución simple que puede andar bien por ahora mientras pensamos en algo más sofisticado.