Tapestry 5.4 has a loading-mask that is shown while all javascript is loading and executed. Usually, this loading-mask is very useful but it could not be elegant for some projects. We can custom it and maintain the default Tapestry behavior with some CSS.
If you want to disable the loading-mask, Tapestry has a symbol to do it:
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);
...
}
}
For this example, it shows the loading mask for 3 seconds. You can click on buttons below to watch it again. The second button is linked to a mixin.
Show loading-mask for 3 secondsInvoke long running task and show loading-mask through a 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;
}