songs2slides

commit 9eaa8f06d72b7589ced0dcd0cf93d4bf25ef0123
parent f45fd2a4d792ca7980b153de765588e1f0902bd8
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Tue,  9 Apr 2024 17:25:52 -0700

Improve step 3 submission UI

Add loading spinner and update post-download message

Diffstat:
M
songs2slides/static/create.js
 | 
18
+++++++++---------
M
songs2slides/templates/create-step-3.html
 | 
7
+++++++
M
songs2slides/templates/post-download.html
 | 
4
+++-

3 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/songs2slides/static/create.js b/songs2slides/static/create.js
@@ -3,10 +3,10 @@ const PREFIX = 's2s'
 
 // Page load/reload handler
 addEventListener('pageshow', () => {
-    if (STEP === 1 || STEP == 2) {
-        // Correct page state after returning via browser back button
-        document.getElementById('post-submit').hidden = true
-    } else if (STEP === 3) {
+    // Correct page state after returning via browser back button
+    document.getElementById('post-submit').hidden = true
+
+    if (STEP === 3) {
         // Load settings
         const form = document.getElementById('create-form')
         form['title-slides'].checked = storage_get('title-slides', true)
@@ -17,10 +17,10 @@ addEventListener('pageshow', () => {
 
 // Form submit handler
 addEventListener('submit', () => {
-    if (STEP === 1 || STEP === 2) {
-        // Show loading spinner
-        document.getElementById('post-submit').hidden = false
-    } else if (STEP === 3) {
+    // Show loading spinner
+    document.getElementById('post-submit').hidden = false
+
+    if (STEP === 3) {
         // Save settings
         const form = document.getElementById('create-form')
         storage_set('title-slides', form['title-slides'].checked)
@@ -34,7 +34,7 @@ addEventListener('submit', () => {
                 // unless setTimeout is used
                 // (REDIRECT_URL set in create-step-3.html template)
                 window.location.href = REDIRECT_URL
-            }, 100)
+            }, 300)
         }
     }
 })
diff --git a/songs2slides/templates/create-step-3.html b/songs2slides/templates/create-step-3.html
@@ -52,6 +52,13 @@
     </div>
 </form>
 
+<div id="post-submit" class="loading-modal" hidden>
+    <div>
+        <p>Creating your slideshow...</p>
+        <div class="spinner"></div>
+    </div>
+</div>
+
 <script>
     const STEP = 3
     const REDIRECT_URL = "{{ url_for('.post_download') }}"
diff --git a/songs2slides/templates/post-download.html b/songs2slides/templates/post-download.html
@@ -6,7 +6,9 @@
 
 {% block main %}
 <p>
-    Thank you for using Songs2Slides
+    Your slideshow is being downloaded,
+    <br/>
+    thank you for using Songs2Slides.
 </p>
 <p>
     <a href="{{ url_for('.create_step_1') }}">Create another slideshow</a>