enhance: display loading when invoking commands like git push

src/main/frontend/components/shell.cljs

@@ -4,34 +4,43 @@
             [frontend.util :as util]
             [frontend.handler.shell :as shell-handler]
             [clojure.string :as string]
-            [frontend.mixins :as mixins]))
+            [frontend.mixins :as mixins]
+            [promesa.core :as p]))
 
-(defn- run-command
-  [command]
-  (when-not (string/blank? @command)
-    (shell-handler/run-command! @command)))
-
-(defonce command (atom ""))
+(defonce *command (atom ""))
+(defonce *loading? (atom nil))
 
+(defn- run-command
+  []
+  (reset! *loading? true)
+  (->
+   (p/let [_ (when-not (string/blank? @*command)
+               (shell-handler/run-command! @*command))]
+     (reset! *loading? false))
+   (p/finally (fn [] (reset! *loading? false)))))
 
 (rum/defcs shell < rum/reactive
   (mixins/event-mixin
    (fn [state]
      (mixins/on-enter state
-                      :on-enter (fn [state]
-                                  (run-command command)))))
+                      :on-enter (fn [_state] (run-command)))))
   [state]
-  [:div.flex.flex-col
-   [:div
-    [:div
+  (let [loading? (rum/react *loading?)]
+    [:div.flex.flex-col
      [:div
-      [:h1.title
-       "Input command"]
-      [:div.mt-4.mb-4.relative.rounded-md.shadow-sm.max-w-xs
-       [:input#run-command.form-input.block.w-full.sm:text-sm.sm:leading-5
-        {:autoFocus true
-         :on-key-down util/stop-propagation
-         :placeholder "git commit -m ..."
-         :on-change (fn [e]
-                      (reset! command (util/evalue e)))}]]]]
-    (ui/button "Run" :on-click #(run-command command))]])
+      [:div
+       [:div
+        [:h1.title
+         "Input command"]
+        [:div.mt-4.mb-4.relative.rounded-md.shadow-sm.max-w-xs
+         [:input#run-command.form-input.block.w-full.sm:text-sm.sm:leading-5
+          {:autoFocus true
+           :on-key-down util/stop-propagation
+           :placeholder "git commit -m ..."
+           :on-change (fn [e]
+                        (reset! *command (util/evalue e)))}]]]]
+      [:div.flex.flex-row.items-center
+       (ui/button "Run" :on-click run-command)
+       [:div.ml-4
+        (when loading?
+          (ui/loading ""))]]]]))