From 18e1fb0d9630ffcf7800c8255b1df98a2ef476ac Mon Sep 17 00:00:00 2001
From: Adam Wolf <adamwolf@feelslikebunring.com>
Date: Thu, 28 Oct 2021 22:31:54 -0500
Subject: [PATCH] Fixes Add button behavior on Safari

Previously, when you clicked the Add button, the page wouldn't change.

It looked like it wasn't doing anything, as noted by @rcarmo
(https://github.com/ArchiveBox/ArchiveBox/issues/658#issuecomment-948300055)

I didn't track it down the exact reason why. It may be that Safari
didn't like the two opening <h3>s, but I was able to find a bunch of
people complaining about Safari being very finicky with innerHTML
and actually repainting the page, enough that I decided to try just
extending the block hide/show behavior already done with the
delay-warning, and it works for me now in both Chrome and Safari.

For #658.
---
 archivebox/templates/core/add.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/archivebox/templates/core/add.html b/archivebox/templates/core/add.html
index 4a60b02e..7d6efc6c 100644
--- a/archivebox/templates/core/add.html
+++ b/archivebox/templates/core/add.html
@@ -28,6 +28,14 @@
                 <a href="/add" id="submit">&nbsp; Add more URLs ➕</a>
             </center>
         {% else %}
+            <div id="in-progress" style="display: none;">
+                <center><h3>Adding URLs to index and running archive methods...</h3>
+                    <br/>
+                    <div class="loader"></div>
+                    <br/>
+                    Check the server log or the <a href="/admin/core/archiveresult/?o=-1">Log</a> page for progress...
+                </center>
+            </div>
             <form id="add-form" method="POST" class="p-form">{% csrf_token %}
                 <h1>Add new URLs to your archive</h1>
                 <br/>
@@ -48,10 +56,9 @@
             {% endif %}
             <script>
                 document.getElementById('add-form').addEventListener('submit', function(event) {
-                    setTimeout(function() {
-                        document.getElementById('add-form').innerHTML = '<center><h3>Adding URLs to index and running archive methods...<h3><br/><div class="loader"></div><br/>Check the server log or the <a href="/admin/core/archiveresult/?o=-1">Log</a> page for progress...</center>'
-                        document.getElementById('delay-warning').style.display = 'block'
-                    }, 200)
+                    document.getElementById('in-progress').style.display = 'block'
+                    document.getElementById('add-form').style.display = 'none'
+                    document.getElementById('delay-warning').style.display = 'block'
                     return true
                 })
             </script>