From 21886841ff0c6640265b72d4f0fcea2ab85fd152 Mon Sep 17 00:00:00 2001
From: Tienson Qin <tiensonqin@gmail.com>
Date: Tue, 15 Dec 2020 11:57:15 +0800
Subject: [PATCH] fix: loading animation

---
 resources/css/common.css                 |  2 +-
 src/main/frontend/components/draw.cljs   |  5 ++---
 src/main/frontend/components/editor.cljs |  7 +++----
 src/main/frontend/components/repo.cljs   | 11 ++++-------
 src/main/frontend/handler/web/nfs.cljs   |  2 +-
 5 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/resources/css/common.css b/resources/css/common.css
index ddf8d22a92..40700819e8 100644
--- a/resources/css/common.css
+++ b/resources/css/common.css
@@ -393,7 +393,7 @@ svg {
 }
 
 .loader {
-  -webkit-animation: lds-dual-ring 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
 }
 
 .canceled,
diff --git a/src/main/frontend/components/draw.cljs b/src/main/frontend/components/draw.cljs
index 380ec937d7..1ff7e2d4cf 100644
--- a/src/main/frontend/components/draw.cljs
+++ b/src/main/frontend/components/draw.cljs
@@ -429,7 +429,7 @@
         (svg/logo false)]
        (files)
        (when loading?
-         [:span.lds-dual-ring.ml-3])]]
+         svg/loading)]]
      (ui/notification)
 
      (when current-repo
@@ -486,8 +486,7 @@
                              "draw-with-no-file"))
                     "draw-with-no-file")]
           (rum/with-key (draw-inner option) key)))
-      [:div.center
-       [:span.lds-dual-ring.ml-3]])))
+      [:div.center svg/loading])))
 
 (rum/defc draw < rum/reactive
   [option]
diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs
index bfd7ba86fe..767a5d09c3 100644
--- a/src/main/frontend/components/editor.cljs
+++ b/src/main/frontend/components/editor.cljs
@@ -345,10 +345,9 @@
    (when-let [uploading? (util/react editor-handler/*image-uploading?)]
      (let [processing (util/react editor-handler/*image-uploading-process)]
        (transition-cp
-        [:div.flex.flex-row.align-center.rounded-md.shadow-sm.bg-base-2.pl-1.pr-1
-         [:span.lds-dual-ring.mr-2]
-         [:span {:style {:margin-top 2}}
-          (util/format "Uploading %s%" (util/format "%2d" processing))]]
+        [:div.flex.flex-row.align-center.rounded-md.shadow-sm.bg-base-2.px-1.py-1
+         (ui/loading
+          (util/format "Uploading %s%" (util/format "%2d" processing)))]
         false
         *slash-caret-pos)))])
 
diff --git a/src/main/frontend/components/repo.cljs b/src/main/frontend/components/repo.cljs
index ac01ba32f0..a28a127e85 100644
--- a/src/main/frontend/components/repo.cljs
+++ b/src/main/frontend/components/repo.cljs
@@ -107,8 +107,7 @@
                 ;; db-persisted? (state/sub [:db/persisted? repo])
                 editing? (seq (state/sub :editor/editing?))]
             [:div.flex-row.flex.items-center.cp__repo-indicator
-             (when pushing?
-               [:span.lds-dual-ring.mt-1])
+             (when pushing? svg/loading)
              (ui/dropdown
               (fn [{:keys [toggle-fn]}]
                 [:div.cursor.w-2.h-2.sync-status.mr-2
@@ -139,7 +138,7 @@
                        [:p (t :git/push-failed)]
                        (and should-push? (seq changed-files))
                        [:div.changes
-                        [:ul.overflow-y-scroll {:style {:max-height 250}}
+                        [:ul.overflow-y-auto {:style {:max-height 250}}
                          (for [file changed-files]
                            [:li {:key (str "sync-" file)}
                             [:div.flex.flex-row.justify-between.align-items
@@ -155,8 +154,7 @@
                     [:div.flex.flex-row.justify-between.align-items.mt-2
                      (ui/button (t :git/push)
                                 :on-click (fn [] (state/set-modal! commit/add-commit-message)))
-                     (if pushing?
-                       [:span.lds-dual-ring.mt-1])]]
+                     (if pushing? svg/loading)]]
                    [:hr]
                    [:div
                     (when-not (string/blank? last-pulled-at)
@@ -165,8 +163,7 @@
                     [:div.flex.flex-row.justify-between.align-items
                      (ui/button (t :git/pull)
                                 :on-click (fn [] (repo-handler/pull-current-repo)))
-                     (if pulling?
-                       [:span.lds-dual-ring.mt-1])]
+                     (if pulling? svg/loading)]
                     [:a.mt-5.text-sm.opacity-50.block
                      {:on-click (fn []
                                   (export-handler/export-repo-as-zip! repo))}
diff --git a/src/main/frontend/handler/web/nfs.cljs b/src/main/frontend/handler/web/nfs.cljs
index c3a382bbd0..bdea1a9b67 100644
--- a/src/main/frontend/handler/web/nfs.cljs
+++ b/src/main/frontend/handler/web/nfs.cljs
@@ -82,7 +82,7 @@
   (let [handles (map (fn [[path handle]]
                        (let [handle-path (str config/local-handle-prefix path)]
                          [handle-path handle]))
-                  handles)]
+                     handles)]
     (doseq [[path handle] handles]
       (fs/add-nfs-file-handle! path handle))
     (set-files-aux! handles)))