enhance loading

Author: sprocketc

resources/public/index.html

@@ -23,7 +23,7 @@
   </div>
 </body>
 
-<script src="js/shared.js"></script>
-<script src="js/renderer.js"></script>
+<script defer src="js/shared.js"></script>
+<script defer src="js/renderer.js"></script>
 
 </html>

src/renderer/app/events.cljs

@@ -67,6 +67,11 @@
        {:db app-db}
        {::app.effects/clear-local-storage nil}))))
 
+(rf/reg-event-db
+ ::set-loading
+ (fn [db [_ state]]
+   (assoc db :loading state)))
+
 (rf/reg-event-fx
  ::db-loaded
  [(rf/inject-cofx ::effects/guid)
@@ -84,13 +89,11 @@
                 (history.handlers/finalize #(t [:create-doc "Create document"])))
 
             initial-document
-            (snap.handlers/rebuild-tree)
-
-            :always
-            (assoc :loading false))
+            (snap.handlers/rebuild-tree))
       :fx (into
            [[:dispatch [::theme.events/set-document-attr]]
-            [:dispatch ^:flush-dom [::set-lang-attrs]]
+            [:dispatch [::set-lang-attrs]]
+            [:dispatch [::set-loading false]]
             ;; We need to render once to get the canvas size right.
             [:dispatch ^:flush-dom [::window.events/update-focused]]
             [::theme.effects/add-native-listener [::theme.events/set-document-attr]]

src/renderer/app/views.cljs

@@ -352,9 +352,8 @@
         active-tool @(rf/subscribe [::tool.subs/active])
         recent-documents @(rf/subscribe [::document.subs/recent])
         lang-dir @(rf/subscribe [::app.subs/lang-dir])
-        loading @(rf/subscribe [::app.subs/loading?])]
-    (if loading
-      [:div.loader]
+        is-app-loading @(rf/subscribe [::app.subs/loading?])]
+    (when-not is-app-loading
       [:> Direction/Provider {:dir lang-dir}
        [:> Tooltip/Provider
         [:div.flex.flex-col.flex-1.h-dvh.overflow-hidden.justify-between

src/renderer/components.css

@@ -274,11 +274,11 @@
 
   &:after,
   &:before {
-    @apply absolute top-0 left-0;
+    @apply absolute top-0 left-0 bg-white;
     content: '';
     width: 24px;
     height: 24px;
-    border: 2px solid var(--font-color);
+    border: 1px solid gray;
     animation: rotationBreak 3s ease-in-out infinite alternate;
   }