🐛 Improve fonts loading related to thumbnals rendering

frontend/src/app/config.cljs

@@ -79,6 +79,7 @@
       "unknown"
       date)))
 
+
 ;; --- Globar Config Vars
 
 (def default-theme  "default")

frontend/src/app/main/fonts.cljs

@@ -82,8 +82,12 @@
 ;; FONTS LOADING
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defonce loaded (l/atom #{}))
-(defonce loading (l/atom {}))
+(defonce ^:dynamic loaded (l/atom #{}))
+(defonce ^:dynamic loading (l/atom {}))
+
+;; NOTE: mainly used on worker, when you don't really need load font
+;; only know if the font is needed or not
+(defonce ^:dynamic loaded-hints (l/atom #{}))
 
 (defn- create-link-element
   [uri]
@@ -190,34 +194,35 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn ensure-loaded!
-  [id]
-  (log/debug :action "try-ensure-loaded!" :font-id id)
-  (if-not (exists? js/window)
+  ([font-id] (ensure-loaded! font-id nil))
+  ([font-id variant-id]
+   (log/debug :action "try-ensure-loaded!" :font-id font-id :variant-id variant-id)
+   (if-not (exists? js/window)
     ;; If we are in the worker environment, we just mark it as loaded
     ;; without really loading it.
     (do
-      (swap! loaded conj id)
-      (p/resolved id))
+      (swap! loaded-hints conj {:font-id font-id :font-variant-id variant-id})
+      (p/resolved font-id))
 
-    (let [font (get @fontsdb id)]
+    (let [font (get @fontsdb font-id)]
       (cond
         (nil? font)
-        (p/resolved id)
+        (p/resolved font-id)
 
         ;; Font already loaded, we just continue
-        (contains? @loaded id)
-        (p/resolved id)
+        (contains? @loaded font-id)
+        (p/resolved font-id)
 
         ;; Font is currently downloading. We attach the caller to the promise
-        (contains? @loading id)
-        (p/resolved (get @loading id))
+        (contains? @loading font-id)
+        (p/resolved (get @loading font-id))
 
         ;; First caller, we create the promise and then wait
         :else
         (let [on-load (fn [resolve]
-                        (swap! loaded conj id)
-                        (swap! loading dissoc id)
-                        (resolve id))
+                        (swap! loaded conj font-id)
+                        (swap! loading dissoc font-id)
+                        (resolve font-id))
 
               load-p (p/create
                       (fn [resolve _]
@@ -225,8 +230,8 @@
                             (assoc ::on-loaded (partial on-load resolve))
                             (load-font))))]
 
-          (swap! loading assoc id load-p)
-          load-p)))))
+          (swap! loading assoc font-id load-p)
+          load-p))))))
 
 (defn ready
   [cb]
@@ -294,14 +299,7 @@
        (mapv second)))
 
 (defn render-font-styles
-  [ids]
-  (->> (rx/from ids)
-       (rx/mapcat (fn [font-id]
-                    (let [font (get @fontsdb font-id)]
-                      (->> (:variants font [])
-                           (map :id)
-                           (map (fn [variant-id]
-                                  {:font-id font-id
-                                   :font-variant-id variant-id}))))))
+  [font-refs]
+  (->> (rx/from font-refs)
        (rx/mapcat fetch-font-css)
        (rx/reduce (fn [acc css] (dm/str acc "\n" css)) "")))

frontend/src/app/main/ui/shapes/text.cljs

@@ -16,10 +16,13 @@
 
 (defn- load-fonts!
   [content]
-  (let [default (:font-id txt/default-text-attrs)]
+  (let [extract-fn (juxt :font-id :font-variant-id)
+        default    (extract-fn txt/default-text-attrs)]
     (->> (tree-seq map? :children content)
-         (into #{default} (keep :font-id))
-         (run! fonts/ensure-loaded!))))
+         (into #{default} (keep extract-fn))
+         (run! (fn [[font-id variant-id]]
+                 (when (some? font-id)
+                   (fonts/ensure-loaded! font-id variant-id)))))))
 
 (mf/defc text-shape
   {::mf/wrap-props false}

frontend/src/app/worker/thumbnails.cljs

@@ -18,6 +18,7 @@
    [app.util.webapi :as wapi]
    [app.worker.impl :as impl]
    [beicon.core :as rx]
+   [okulary.core :as l]
    [promesa.core :as p]
    [rumext.v2 :as mf]))
 
@@ -61,18 +62,18 @@
 
 (defn- render-thumbnail
   [{:keys [page file-id revn] :as params}]
-  (let [objects  (:objects page)
-        frame    (some->> page :thumbnail-frame-id (get objects))
-        element  (if frame
-                   (mf/element render/frame-svg #js {:objects objects :frame frame :show-thumbnails? true})
-                   (mf/element render/page-svg #js {:data page :thumbnails? true :render-embed? true}))
-        data     (rds/renderToStaticMarkup element)
-        font-ids (into @fonts/loaded (map first) @fonts/loading)]
+  (binding [fonts/loaded-hints (l/atom #{})]
+    (let [objects  (:objects page)
+          frame    (some->> page :thumbnail-frame-id (get objects))
+          element  (if frame
+                     (mf/element render/frame-svg #js {:objects objects :frame frame :show-thumbnails? true})
+                     (mf/element render/page-svg #js {:data page :thumbnails? true :render-embed? true}))
+          data     (rds/renderToStaticMarkup element)]
 
-    {:data data
-     :fonts font-ids
-     :file-id file-id
-     :revn revn}))
+      {:data data
+       :fonts @fonts/loaded-hints
+       :file-id file-id
+       :revn revn})))
 
 (defmethod impl/handler :thumbnails/generate-for-file
   [{:keys [file-id revn features] :as message} _]