add a bit more feedback for users

src/dialog-loader.js

@@ -2,8 +2,6 @@ import $ from 'jquery'
 import 'bootstrap/js/dist/modal'
 import 'boxicons/css/boxicons.css'
 
-import { taskDebounce } from './util';
-
 let $modal
 let $loadingStatus
 const dialogClass = 'dialog-loader'
@@ -29,26 +27,28 @@ const createModal = () => {
 }
 
 const showModal = (callback) => {
-  $loadingStatus.text('Building your custom Bootstrap...')
+  $loadingStatus.text('Downloading your assets...')
   $modal
     .one('shown.bs.modal', () => {
-      taskDebounce(() => {
-        callback()
-      })()
+      callback()
     })
     .modal('show')
 }
 
+const updateDialogStatus = (text) => {
+  $loadingStatus.text(text)
+  return $loadingStatus[0].offsetHeight
+}
 const hideModal = () => {
-  $modal
-    .one('hidden.bs.modal', () => {
-      $loadingStatus.text('')
-    })
-    .modal('hide')
+  $modal.one('hidden.bs.modal', () => {
+    updateDialogStatus('')
+  })
+  .modal('hide')
 }
 
 export {
   createModal,
   showModal,
   hideModal,
+  updateDialogStatus,
 }

src/index.js

@@ -2,8 +2,8 @@ import $ from 'jquery'
 import axios from 'axios'
 
 import { createFileContent, downloadFile } from './file-util'
-import { formatList } from './util'
-import { createModal, showModal, hideModal } from './dialog-loader'
+import { formatList, delay } from './util'
+import { createModal, showModal, hideModal, updateDialogStatus } from './dialog-loader'
 
 import 'bootstrap/dist/css/bootstrap.css'
 import './main.css'
@@ -81,10 +81,18 @@ $(() => {
 
       axios.all(listOfRequest)
         .then((listOfFiles) => {
-          hideModal()        
-          downloadFile(fileName, createFileContent(listOfFiles, minify))
+          updateDialogStatus('Building your assets...')
+
+          delay(10, () => {
+            const fileContent = createFileContent(listOfFiles, minify)
+
+            delay(10, () => {
+              downloadFile(fileName, fileContent)
+              hideModal()
+            })  
+          })
         })
-        .catch(() => {
+        .catch((err) => {
           hideModal()
         })
     })

src/util.js

@@ -21,20 +21,13 @@ const formatList = (list) => {
 	return listPlugin
 }
 
-const taskDebounce = (fn) => {
-  let scheduled = false;
-  return () => {
-    if (!scheduled) {
-      scheduled = true
-      setTimeout(() => {
-        scheduled = false
-        fn()
-      }, 0)
-    }
-  }
+const delay = (time, fn) => {
+  setTimeout(() => {
+    fn()
+  }, time)
 }
 
 export {
   formatList,
-  taskDebounce
+  delay,
 }