feat: replace progressbar with spinner (#192)

mirkoperillo · Mar 20, 2024 · c102084 · c102084
1 parent f753c09
commit c102084
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 61 deletions.
diff --git a/src/css/resting.css b/src/css/resting.css
@@ -225,26 +225,6 @@ a.donate-link:hover {
   display: none;
 }
 
-.animate-progress {
-  animation: progress 1s 1;
-}
-@keyframes progress {
-  from {
-    width: 1%;
-  }
-  to {
-    width: 100%;
-  }
-}
-@-webkit-keyframes progress {
-  from {
-    width: 1%;
-  }
-  to {
-    width: 100%;
-  }
-}
-
 #plus-tab:hover {
   background-color: #286090;
 }
diff --git a/src/index.html b/src/index.html
@@ -157,16 +157,6 @@ <h4>❤️&nbsp;Support the project</h4>
               class="form-control"
               placeholder="http://"
               data-bind="textInput: request.url, event: { keyup: callSendOnEnter}" />
-            <div class="progress" style="margin-top: 5px">
-              <div
-                data-bind="css: { animate-progress: requestState().value === 'IN_PROGRESS' }"
-                style="height: 20px; text-indent: -10000px">
-                <div
-                  class="progress-bar progress-bar-striped"
-                  data-bind="css: { active: requestState().value === 'IN_PROGRESS', progress-bar-animated: requestState().value === 'IN_PROGRESS' }, attr: { aria-busy: requestState().value === 'IN_PROGRESS' }, text: requestState().ariaText, style: { width: requestState().progressWidth }"
-                  aria-role="alert"></div>
-              </div>
-            </div>
           </div>
         </div>
 
@@ -178,6 +168,10 @@ <h4>❤️&nbsp;Support the project</h4>
                 class="btn btn-primary"
                 data-bind="click: send">
                 Send
+                <span data-bind="visible: executionInProgress">
+                <i class="fa fa-spinner fa-pulse fa-fw"></i>
+                  <span class="sr-only">Loading...</span>
+                </span>
               </button>
             </div>
             <div class="btn-group">

diff --git a/src/js/app.js b/src/js/app.js
@@ -44,10 +44,8 @@ requirejs(
     'app/storage',
     'knockout',
     'knockout-secure-binding',
-    'hjls',
     'app/request',
     'app/bookmark',
-    'app/clipboard',
     'app/bacheca',
     'bootstrap',
     'app/contextVm',
@@ -59,17 +57,14 @@ requirejs(
     'component/bookmarks/bookmarkVm',
     'vuecomp/dialogs-app.umd',
     'vuecomp/add-folder-button.umd',
-    'json-viewer',
   ],
   function (
     $,
     storage,
     ko,
     ksb,
-    hjls,
     requestSrv,
     makeBookmarkProvider,
-    clipboard,
     bacheca,
     bootstrap,
     ContextVm,
@@ -80,27 +75,8 @@ requirejs(
     EntryItemVm,
     BookmarkVm,
     DialogsApp,
-    AddFolderButton,
-    jsonViewer
+    AddFolderButton
   ) {
-    const REQUEST_STATE_MAP = {
-      NOT_STARTED: {
-        ariaText: 'No request sent',
-        value: 'NOT_STARTED',
-        progressWidth: '0.01%',
-      },
-      IN_PROGRESS: {
-        ariaText: 'request in progress',
-        value: 'IN_PROGRESS',
-        progressWidth: '100%',
-      },
-      COMPLETE: {
-        ariaText: 'Request complete',
-        value: 'COMPLETE',
-        progressWidth: '100%',
-      },
-    }
-
     function AppVm() {
       const contexts = ko.observableArray()
       const selectedCtx = new ContextVm()
@@ -142,8 +118,7 @@ requirejs(
       const showCreateContextDialog = ko.observable(false)
       const showConfirmDialog = ko.observable(false)
 
-      const requestState = ko.observable(REQUEST_STATE_MAP.NOT_STARTED)
-
+      const executionInProgress = ko.observable(false)
       const saveAsNewBookmark = ko.observable(false)
 
       const dialogConfirmMessage = ko.observable()
@@ -546,12 +521,12 @@ requirejs(
           _authentication(mapping),
           _manageResponse
         )
-        requestState(REQUEST_STATE_MAP.IN_PROGRESS)
+        executionInProgress(true)
       }
 
       const _manageResponse = (response) => {
         activeTab.response = response
-        requestState(REQUEST_STATE_MAP.COMPLETE)
+        executionInProgress(false)
         _displayResponse(response)
       }
 
@@ -922,8 +897,7 @@ requirejs(
         showCreateContextDialog,
         showConfirmDialog,
 
-        requestState,
-
+        executionInProgress,
         saveAsNewBookmark,
 
         dialogConfirmMessage,