Delay submit in Desktop Safari (#4137)

To ensure spinner is shown.

web/js/src/formSubmit.js

@@ -1,14 +1,26 @@
 import { enableUnlimitedInputs } from './unlimitedInput';
 import { updateAdvancedTextarea } from './toggleAdvanced';
-import { showSpinner } from './helpers';
+import { isDesktopSafari, showSpinner } from './helpers';
 
 export default function handleFormSubmit() {
 	const mainForm = document.querySelector('#main-form');
 	if (mainForm) {
-		mainForm.addEventListener('submit', () => {
+		mainForm.addEventListener('submit', (event) => {
 			// Show loading spinner
 			showSpinner();
 
+			// Wait a bit if Desktop Safari to ensure spinner is shown
+			if (isDesktopSafari()) {
+				const submitButton = document.querySelector('button[type="submit"]');
+				if (!submitButton.dataset.clicked) {
+					event.preventDefault();
+					submitButton.dataset.clicked = 'true';
+					setTimeout(() => {
+						mainForm.submit();
+					}, 500);
+				}
+			}
+
 			// Enable any disabled inputs to ensure all fields are submitted
 			if (mainForm.classList.contains('js-enable-inputs-on-submit')) {
 				document.querySelectorAll('input[disabled]').forEach((input) => {

web/js/src/helpers.js

@@ -43,6 +43,14 @@ export function parseAndSortIpLists(ipListsData) {
 	return ipLists.sort((a, b) => a.name.localeCompare(b.name));
 }
 
+// Determines if the current browser is Desktop Safari
+export function isDesktopSafari() {
+	const userAgent = window.navigator.userAgent;
+	const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
+	const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+	return isSafari && !isMobile;
+}
+
 // Posts data to the given URL and returns the response
 export async function post(url, data, headers = {}) {
 	const requestOptions = {