diff --git a/.version b/.version index 437459cd9..73462a5a1 100644 --- a/.version +++ b/.version @@ -1 +1 @@ -2.5.0 +2.5.1 diff --git a/app/assets/stylesheets/cerberus.scss b/app/assets/stylesheets/cerberus.scss index 0bd445921..96a607522 100644 --- a/app/assets/stylesheets/cerberus.scss +++ b/app/assets/stylesheets/cerberus.scss @@ -141,3 +141,30 @@ ol.breadcrumb { .nav-tabs { margin: 10px 0px 10px 0px; } + +.loading-state { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.3); + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; + visibility: hidden; +} +.loading { + width: 100px; + height: 100px; + border-radius: 50%; + border: 10px solid #ddd; + border-top-color: $blue; + animation: loading 1s linear infinite; +} +@keyframes loading { + to { + transform: rotate(360deg); + } +} diff --git a/app/javascript/preview_controllers/preview_controller.js b/app/javascript/preview_controllers/preview_controller.js index a75ebafe7..e9a423569 100644 --- a/app/javascript/preview_controllers/preview_controller.js +++ b/app/javascript/preview_controllers/preview_controller.js @@ -15,7 +15,7 @@ export default class extends Controller { }); document.getElementById('validate_button').onclick = function(){ - $("#content").css({visibility:"visible", opacity: 100}).animate({opacity: 0}, 500); + $(".loading-state").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0}, 500); }; } } diff --git a/app/views/shared/_footer.html.haml b/app/views/shared/_footer.html.haml index eab7b5502..e30ef91ce 100644 --- a/app/views/shared/_footer.html.haml +++ b/app/views/shared/_footer.html.haml @@ -1,3 +1,6 @@ +.loading-state + .loading + %footer.footer.mt-auto.py-3 .container-lg .row diff --git a/app/views/xml/validate.turbo_stream.haml b/app/views/xml/validate.turbo_stream.haml index 30d3c1951..818731dc2 100644 --- a/app/views/xml/validate.turbo_stream.haml +++ b/app/views/xml/validate.turbo_stream.haml @@ -2,5 +2,7 @@ = @mods.html_safe :javascript - $("#content").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0}, 500); + $(".loading-state").animate({opacity: 0.0}, 500, function(){ + $(".loading-state").css("visibility","hidden"); + }); window.scrollTo(0,0);