Use progress bar instead of spinner for import

Closes #21

src/index.html

@@ -268,8 +268,8 @@ <h3 class="offcanvas-title">${t('settings.title')}</h3>
                     </div>
                     <div class="row mb-3">
                         <button class="btn btn-primary" onclick="importData()" id="import-button">
-                            <div class="spinner-border spinner-border-sm" role="status">
-                                <span class="visually-hidden">Loading...</span>
+                            <div class="progress my-1 bg-black" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+                                <div id="progress-bar" class="progress-bar bg-white"></div>
                             </div>
                             <span>${t('settings.import')}</span>
                         </button>

src/lib.js

@@ -1134,43 +1134,75 @@ function importData() {
             alert('Incorrect file type!');
             return;
         }
+
         const button = getElement('import-button', HTMLButtonElement);
         button.classList.add('spinning');
+        const progressBar = getElement('progress-bar', HTMLDivElement);
+        progressBar.style.width = '0%';
+
         file.text().then(function (data){
-            if (!db) {
-                button.classList.remove('spinning');
-                return;
-            }
-            let j;
-            try {
-                j = JSON.parse(data);
-            } catch (e) {
-                alert(`Failed to parse file: ${e}`);
-                button.classList.remove('spinning');
-                return;
-            }
-            {
-                Object.assign(settings, j['settings']);
-                restoreSettings();
-                saveSettings();
-            }
-            const transaction = db.transaction(['sessions', 'characters'], 'readwrite');
-            {
-                const objectStore = transaction.objectStore('sessions');
-                for (const session of j['sessions']) {
-                    objectStore.put(session);
-                }
-            }
-            {
-                const objectStore = transaction.objectStore('characters');
-                for (const character of j['characters']) {
-                    objectStore.put(character);
+            progressBar.style.width = '5%';
+            setTimeout(function() {
+                let j;
+                try {
+                    j = JSON.parse(data);
+                } catch (e) {
+                    alert(`Failed to parse file: ${e}`);
+                    button.classList.remove('spinning');
+                    return;
                 }
-            }
-            transaction.oncomplete = function() {
-                button.classList.remove('spinning');
-                document.location.reload();
-            };
+                progressBar.style.width = '10%';
+                setTimeout(function() {
+                    const total = j['sessions'].length + j['characters'].length;
+                    progressBar.style.width = '15%';
+                    setTimeout(function() {
+                        console.time('A');
+                        if (!db) {
+                            button.classList.remove('spinning');
+                            return;
+                        }
+                        {
+                            Object.assign(settings, j['settings']);
+                            restoreSettings();
+                            saveSettings();
+                        }
+                        const transaction = db.transaction(['sessions', 'characters'], 'readwrite');
+                        let processed = 0;
+                        function updateProgress() {
+                            processed += 1;
+                            if (processed % 1000 == 0) {
+                                const progress = 15 + (processed / total * 85);
+                                progressBar.style.width = progress + '%';
+                            }
+                        }
+                        // TODO: to avoid the slight pause after 15%, the loops
+                        // below (and in particular the ones for characters)
+                        // should be broken in chunks and scheduled with
+                        // setTimeout; note that the commit should only happen
+                        // once all the elements have been scheduled for put
+                        {
+                            const objectStore = transaction.objectStore('sessions');
+                            for (const session of j['sessions']) {
+                                const request = objectStore.put(session);
+                                request.onsuccess = updateProgress;
+                            }
+                        }
+                        {
+                            const objectStore = transaction.objectStore('characters');
+                            for (const character of j['characters']) {
+                                const request = objectStore.put(character);
+                                request.onsuccess = updateProgress;
+                            }
+                        }
+                        transaction.oncomplete = function() {
+                            progressBar.style.width = '100%';
+                            button.classList.remove('spinning');
+                            //document.location.reload();
+                        };
+                        transaction.commit();
+                    }, 100);
+                }, 100);
+            }, 100);
         })
     }
     input.click();

src/style.css

@@ -39,9 +39,12 @@ h1 rt {
     font-size: 20px;
     text-transform: uppercase;
 }
-button:not(.spinning)>.spinner-border {
+button:not(.spinning)>div {
     display:none;
 }
 button.spinning>span {
     display:none;
 }
+.progress {
+    --bs-progress-bar-transition: width 0.1s ease;
+}