perf: async rendering code blocks

This commit is contained in:
Tienson Qin
2025-04-09 15:54:22 +08:00
parent 43e9f9707c
commit 75e9799c66
2 changed files with 34 additions and 25 deletions

View File

@@ -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

View File

@@ -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))))