Fix saving on some pages, replace spinner (hestiacp#3307)

Use alpine event bindings

load shortcuts.js after jquery

Replace spinner

Fix loader

Author: imjuniper

web/css/src/themes/default.css

@@ -2187,132 +2187,25 @@
 /* Spinner
    ========================================================================== */
 
-.spinner {
-	-webkit-mask-box-image: radial-gradient(
-		center,
-		ellipse farthest-corner,
-		rgb(0 0 0 / 100%) 68%,
-		rgb(0 0 0 / 0%) 69.5%
-	);
-	background: #eee;
-	size: 20px;
-	position: relative;
-	clip-path: ellipse(10px 10px at 50% 50%);
-}
-
-.spinner-inner {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background: transparent;
-	border-width: 10px;
-	size: 0;
-	border-style: solid;
-	border-color: transparent;
-	border-top-color: rgb(124 124 124 / 100%);
-	transform: rotate(-45deg);
-	animation: inner 15s linear infinite;
-}
-
-.spinner-mask {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background: transparent;
-	border-width: 10px;
-	size: 0;
-	border-style: solid;
-	border-color: transparent;
-	border-top-color: #eee;
-	transform: rotate(-45deg);
-	animation: mask 15s linear infinite;
-}
-
-.spinner-mask::after,
-.spinner-mask-two {
-	display: block;
-	content: "";
+.fullscreen-loader {
+	position: fixed;
+	inset: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 50px;
+	background-color: rgb(0 0 0 / 50%);
+	font-size: 50px;
+	z-index: 9999;
+	visibility: hidden;
 	opacity: 0;
-	position: absolute;
-	top: 0;
-	left: 0;
-	background: transparent;
-	border-width: 10px;
-	size: 0;
-	border-style: solid;
-	border-color: transparent;
-	border-top-color: rgb(124 124 124 / 100%);
-	transform: rotate(45deg);
-	animation: mask-two 15s linear infinite;
+	transition: opacity 0.2s ease, visibility 0s 0.2s;
 }
 
-@keyframes inner {
-	0% {
-		transform: rotate(-45deg);
-	}
-
-	25% {
-		border-left-color: transparent;
-	}
-
-	26% {
-		border-left-color: rgb(124 124 124 / 100%);
-	}
-
-	50% {
-		border-bottom-color: transparent;
-	}
-
-	51% {
-		border-bottom-color: rgb(124 124 124 / 100%);
-	}
-
-	75% {
-		border-right-color: transparent;
-	}
-
-	76% {
-		border-right-color: rgb(124 124 124 / 100%);
-	}
-
-	100% {
-		transform: rotate(315deg);
-		border-left-color: rgb(124 124 124 / 100%);
-		border-bottom-color: rgb(124 124 124 / 100%);
-		border-right-color: rgb(124 124 124 / 100%);
-	}
-}
-
-@keyframes mask {
-	0% {
-		transform: rotate(-45deg);
-	}
-
-	75% {
-		transform: rotate(-45deg);
-	}
-
-	100% {
-		transform: rotate(45deg);
-	}
-}
-
-@keyframes mask-two {
-	0% {
-		opacity: 0;
-	}
-
-	25% {
-		opacity: 0;
-	}
-
-	26% {
-		opacity: 1;
-	}
-
-	100% {
-		opacity: 1;
-	}
+.fullscreen-loader.show {
+	visibility: visible;
+	opacity: 1;
+	transition: opacity 0.2s ease, visibility 0s 0s;
 }
 
 .qr-code {

web/css/themes/default.min.css

@@ -1,21 +1,8 @@
 document.addEventListener('DOMContentLoaded', () => {
 	// Refactored
-	const submitLoader = document.querySelector('.button[form=vstobjects][type=submit]');
-	if (submitLoader) {
-		submitLoader.addEventListener('click', (evt) => {
-			const loaderElement = document.createElement('div');
-			loaderElement.classList.add('spinner');
-			loaderElement.innerHTML =
-				'<div class="spinner-inner"></div><div class="spinner-mask"></div><div class="spinner-mask-two"></div>';
-
-			// this both gives an indication that we've clicked and is loading, also prevents double-clicking/clicking-on-something-else while loading.
-			document.querySelector('.button[form=vstobjects][type=submit]').replaceWith(loaderElement);
-			document.querySelector('.button').replaceWith('');
-			// workaround a render bug on Safari (loading icon doesn't render without this)
-			evt.preventDefault();
-			document.querySelector('#vstobjects').submit();
-		});
-	}
+	document.querySelector('#vstobjects').addEventListener('submit', () => {
+		document.querySelector('.fullscreen-loader').classList.add('show');
+	});
 
 	document.querySelectorAll('.toolbar-right .sort-by').forEach((el) => {
 		el.addEventListener('click', () => $('.context-menu.sort-order').toggle());

web/js/init.js

@@ -55,14 +55,14 @@ App.Listeners.PACKAGE.init = function () {
 // Trigger listeners
 App.Listeners.PACKAGE.init();
 App.Listeners.PACKAGE.checkbox_unlimited_feature();
-$('form[name="v_edit_package"]').on('submit', function () {
+App.Listeners.PACKAGE.submit = function () {
 	$('input:disabled').each(function (i, elm) {
 		$(elm).attr('disabled', false);
 		if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
 			$(elm).val(Alpine.store('globals').UNLIM_VALUE);
 		}
 	});
-});
+};
 
 $(document).ready(function () {
 	$('.js-add-ns').click(function () {

web/js/pages/edit_package.js

@@ -17,6 +17,10 @@
 		<p><?= _("LEAVE_PAGE_CONFIRMATION") ?></p>
 	</div>
 
+	<div class="fullscreen-loader">
+		<i class="fas fa-circle-notch fa-spin"></i>
+	</div>
+
 	<div x-data>
 		<dialog x-ref="dialog" class="shortcuts animate__animated animate__fadeIn">
 			<div class="shortcuts-header">

web/templates/footer.php

@@ -1,9 +1,9 @@
 <script defer src="/js/main.js?<?= JS_LATEST_UPDATE ?>"></script>
-<script defer src="/js/shortcuts.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/alpine-3.10.5.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/jquery-3.6.3.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/jquery-ui.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/chart.min.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/shortcuts.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/events.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/init.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script>

web/templates/includes/js.php

@@ -25,6 +25,7 @@
 			showDatabaseOptions: false,
 			showSystemOptions: false,
 		}"
+		x-on:submit="App.Listeners.PACKAGE.submit()"
 		id="vstobjects"
 		name="v_edit_package"
 		method="post"