perf: async rendering code blocks

src/main/frontend/components/block.cljs

@@ -2885,7 +2885,8 @@
        (merge attrs))
 
      [:<>
-      (when (> (count content) (state/block-content-max-length (state/get-current-repo)))
+      (when (and (> (count content) (state/block-content-max-length (state/get-current-repo)))
+                 (not (contains? #{:code} (:logseq.property.node/display-type block))))
         [:div.warning.text-sm
          "Large block will not be editable or searchable to not slow down the app, please use another editor to edit this block."])
       [:div.flex.flex-row.justify-between.block-content-inner

src/main/frontend/components/lazy_editor.cljs

@@ -1,12 +1,12 @@
 (ns frontend.components.lazy-editor
   (:require [clojure.string :as string]
-            [rum.core :as rum]
-            [shadow.lazy :as lazy]
-            [frontend.ui :as ui]
             [frontend.config :as config]
-            [frontend.state :as state]
             [frontend.handler.plugin :refer [hook-extensions-enhancers-by-key]]
-            [promesa.core :as p]))
+            [frontend.state :as state]
+            [frontend.ui :as ui]
+            [promesa.core :as p]
+            [rum.core :as rum]
+            [shadow.lazy :as lazy]))
 
 ;; TODO: Why does shadow fail when code is required
 #_:clj-kondo/ignore
@@ -14,28 +14,36 @@
 
 (defonce loaded? (atom false))
 
-(rum/defc editor <
+(rum/defcs editor <
   rum/reactive
   {:will-mount
    (fn [state]
-     (lazy/load lazy-editor
-                (fn []
-                  (if-not @loaded?
-                    (p/finally
-                     (p/all (when-let [enhancers (and config/lsp-enabled?
-                                                      (seq (hook-extensions-enhancers-by-key :codemirror)))]
-                              (for [{f :enhancer} enhancers]
-                                (when (fn? f) (f (. js/window -CodeMirror))))))
-                     (fn []
-                       (-> (p/delay 200)
-                           (p/then #(reset! loaded? true)))))
-                    (reset! loaded? true))))
-     state)}
-  [config id attr code options]
-  (let [loaded?' (rum/react loaded?)
+     (when-not @loaded?
+       (lazy/load lazy-editor
+                  (fn []
+                    (if-not @loaded?
+                      (p/finally
+                        (p/all (when-let [enhancers (and config/lsp-enabled?
+                                                         (seq (hook-extensions-enhancers-by-key :codemirror)))]
+                                 (for [{f :enhancer} enhancers]
+                                   (when (fn? f) (f (. js/window -CodeMirror))))))
+                        (fn []
+                          (reset! loaded? true)))
+                      (reset! loaded? true)))))
+     (let [*loading? (atom true)
+           timeout (js/setTimeout #(reset! *loading? false) 0)]
+       (assoc state
+              ::loading? *loading?
+              ::timeout timeout)))
+   :will-unmount (fn [state]
+                   (js/clearTimeout (::timeout state))
+                   state)}
+  [state config id attr code options]
+  (let [*loading? (::loading? state)
+        loaded?' (rum/react loaded?)
         theme   (state/sub :ui/theme)
         code    (or code "")
         code    (string/replace-first code #"\n$" "")]      ;; See-also: #3410
-    (if loaded?'
-      (@lazy-editor config id attr code theme options)
-      (ui/loading "CodeMirror"))))
+    (if (or (not loaded?') (rum/react *loading?))
+      (ui/loading "CodeMirror")
+      (@lazy-editor config id attr code theme options))))