Safari Annoyance with Overlay Spinner - So Dumb!

Ever noticed that on macOS Safari that when clicking “Save”, i.e. during an add domain, that the overlay spinner doesn’t render? Rarely, it does. Why this behavior still occurs in 2023 is beyond me. But HestiaCP is not alone:

A hack to fix this would be to detect Safari like it’s 2003 (just kidding, but not really; Safari landed 20 years ago!) and introduce a delay on submission and force the render:

if (navigator.userAgent.toLowerCase().indexOf('safari/') > -1) {
    let clicked = false;
    const submitButton = document.querySelector('button[type="submit"]');
    submitButton.addEventListener('click', function(e) {
        if (clicked) return;
        e.preventDefault();
        const spinnerOverlay = document.querySelector('.spinner-overlay');
        spinnerOverlay.classList.add('active');
        setTimeout(function() {
            submitButton.click();
        }, 500);
        clicked = true;
    });
}

I’m thinking about submitting a PR on this. It fixes Safari and makes it play nice, and definitely FEELS better. Anyone want to see this or equally annoyed by this?

2 Likes

Please go ahead …

2 Likes