enhance(perf): don't trigger reactive queries for all cards

resources/css/animation.css

@@ -39,33 +39,9 @@
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
 
-  -webkit-animation-duration: 2s;
-  -moz-animation-duration: 2s;
-  animation-duration: 2s;
-}
-
-.fade-in.one {
-  -webkit-animation-delay: 0.5s;
-  -moz-animation-delay: 0.5s;
-  animation-delay: 0.5s;
-}
-
-.fade-in.two {
-  -webkit-animation-delay: 1s;
-  -moz-animation-delay: 1s;
-  animation-delay: 1s;
-}
-
-.fade-in.three {
-  -webkit-animation-delay: 1.5s;
-  -moz-animation-delay: 1.5s;
-  animation-delay: 1.5s;
-}
-
-.fade-in.four {
-  -webkit-animation-delay: 2s;
-  -moz-animation-delay: 2s;
-  animation-delay: 2s;
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration: 1s;
+  animation-duration: 1s;
 }
 
 /* page transition */
@@ -85,4 +61,4 @@
 .fade-exit.fade-exit-active {
   opacity: 0;
   transition: opacity 300ms ease-in;
-}
+}

src/main/frontend/components/sidebar.cljs

@@ -13,6 +13,7 @@
             [frontend.context.i18n :as i18n]
             [frontend.db :as db]
             [frontend.db.model :as db-model]
+            [frontend.db.react :as db-react]
             [frontend.components.svg :as svg]
             [frontend.db-mixins :as db-mixins]
             [frontend.handler.editor :as editor-handler]
@@ -163,14 +164,24 @@
         [:li {:key name}
          (page-name name)])])))
 
-(rum/defc flashcards < rum/reactive db-mixins/query
-  []
-  (let [num (srs/get-srs-cards-total)]
+(rum/defcs flashcards < db-mixins/query rum/reactive
+  {:will-mount (fn [state]
+                 (assoc state :cards-total (atom nil)))
+   :did-mount (fn [state]
+                (let [cards-total (:cards-total state)]
+                  (js/setTimeout
+                   (fn []
+                     (let [total (srs/get-srs-cards-total)]
+                       (reset! cards-total total)))
+                   200)
+                  state))}
+  [state]
+  (let [num (util/react (:cards-total state))]
     [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:on-click #(state/pub-event! [:modal/show-cards])}
      (ui/icon "infinity mr-3" {:style {:font-size 20}})
      [:span.flex-1 "Flashcards"]
      (when (and num (not (zero? num)))
-       [:span.ml-3.inline-block.py-0.5.px-3.text-xs.font-medium.rounded-full num])]))
+       [:span.ml-3.inline-block.py-0.5.px-3.text-xs.font-medium.rounded-full.fade-in num])]))
 
 (rum/defc sidebar-nav < rum/reactive
   [route-match close-modal-fn]

src/main/frontend/db/react.cljs

@@ -135,9 +135,10 @@
   (conj (vec inputs) rules/rules))
 
 (defn q
-  [repo k {:keys [use-cache? transform-fn query-fn inputs-fn]
+  [repo k {:keys [use-cache? transform-fn query-fn inputs-fn disable-reactive?]
            :or {use-cache? true
-                transform-fn identity}} query & inputs]
+                transform-fn identity}
+           :as opts} query & inputs]
   (let [kv? (and (vector? k) (= :kv (first k)))
         k (vec (cons repo k))]
     (when-let [conn (conn/get-conn repo)]
@@ -166,7 +167,9 @@
                 result-atom (or result-atom (atom nil))]
             ;; Don't notify watches now
             (set! (.-state result-atom) result)
-            (add-q! k query inputs result-atom transform-fn query-fn inputs-fn)))))))
+            (if-not disable-reactive?
+              (add-q! k query inputs result-atom transform-fn query-fn inputs-fn)
+              result-atom)))))))
 
 
 

src/main/frontend/extensions/srs.cljs

@@ -247,21 +247,29 @@
 (defn- query
   "Use same syntax as frontend.db.query-dsl.
   Add an extra condition: block's :block/refs contains `#card or [[card]]'"
-  [repo query-string]
-  (when (string? query-string)
-    (let [query-string (template/resolve-dynamic-template! query-string)]
-      (let [{:keys [query sort-by] :as result} (query-dsl/parse repo query-string)]
-        (let [query* (concat [['?b :block/refs [:block/name card-hash-tag]]]
-                             (if (coll? (first query))
-                               query
-                               [query]))]
-          (when-let [query** (query-dsl/query-wrapper query* true)]
-            (let [result (react/react-query repo
-                                            {:query query**}
-                                            (when sort-by
-                                              {:transform-fn sort-by}))]
-              (when result
-                (flatten (util/react result))))))))))
+  ([repo query-string]
+   (query repo query-string {}))
+  ([repo query-string {:keys [disable-reactive? use-cache?]
+                       :or {use-cache? true}}]
+   (when (string? query-string)
+     (let [query-string (template/resolve-dynamic-template! query-string)]
+       (let [{:keys [query sort-by] :as result} (query-dsl/parse repo query-string)]
+         (let [query* (concat [['?b :block/refs [:block/name card-hash-tag]]]
+                              (if (coll? (first query))
+                                query
+                                [query]))]
+           (when-let [query (query-dsl/query-wrapper query* true)]
+             (let [result (react/react-query repo
+                                             {:query query}
+                                             (merge
+                                              {:use-cache? use-cache?}
+                                              (cond->
+                                                (when sort-by
+                                                  {:transform-fn sort-by})
+                                                disable-reactive?
+                                                (assoc :disable-reactive? true))))]
+               (when result
+                 (flatten (util/react result)))))))))))
 
 (defn- query-scheduled
   "Return blocks scheduled to 'time' or before"
@@ -530,7 +538,8 @@
   []
   (let [repo (state/get-current-repo)
         query-string ""
-        blocks (query repo query-string)]
+        blocks (query repo query-string {:use-cache? false
+                                         :disable-reactive? true})]
     (when (seq blocks)
       (let [{:keys [result]} (query-scheduled repo blocks (tl/local-now))
             count (count result)]