Tapestry 5.4 viene con una loading-mask que se muestra mientras se descarga y ejecuta todo el javascript relativo a la página. Por defecto, este loading-mask es muy útil, sin embargo puede quedar algo "feo" en ciertos proyectos. Con un poco de css podemos cambiar por completo su aspecto y dejar el comportamiento que trae Tapestry por defecto.
Si lo que deseas es deshabilitar la loading-mask, tapestry incluye un símbolo para poder hacerlo:
public class AppModule {
public static void contributeApplicationDefaults(
final MappedConfiguration<String, Object> configuration) {
configuration.add(SymbolConstants.SUPPORTED_LOCALES, "en,es");
...
configuration.add(SymbolConstants.ENABLE_PAGELOADING_MASK, false);
...
}
}
Para este ejemplo se muestra la loading mask durante 3 segundos. Puedes pulsar sobre los siguientes botones para verla con más detenimiento. El segundo enlace muestra ligada a un mixin.
Mostrar loading-mask durante 3 segundosInvocar a operación costosa y mostrar la loading-mask mediante un mixin.pageloading-mask {
animation-name: none;
-webkit-animation-name: none;
display: table;
height: 100%;
width: 100%;
background-color: rgba(155, 155, 155, 0.7);
opacity: 1;
}
.pageloading-mask div {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
background-image: none;
}
.pageloading-mask div:before {
content: "";
width: 122px;
height: 122px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index: 99;
margin-top: -75px;
border: 1px solid #fb961b;
border-top-color: white;
border-radius: 50%;
animation: spin 1s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
body.en .pageloading-mask div:after {
content: "Wait please...";
}
body.es .pageloading-mask div:after {
content: "Espera por favor...";
}
.pageloading-mask div:after {
/* content: "Generic text for all languages or empty for no-text"; */
margin: 0 auto;
position: absolute;
text-align: center;
left: 0;
height: 160px;
right: 0;
padding-top: 128px;
width: 140px;
background-color: white;
border-radius: 15px;
background-image: url('../img/loading-mask-logo.png');
background-repeat: no-repeat;
background-position: center 9px;
background-size: 114px 114px;
margin-top: -80px;
}