perf: lazy render code blocks

This commit is contained in:
Tienson Qin
2025-04-09 16:31:53 +08:00
parent 75e9799c66
commit c7b0d6faa2
2 changed files with 23 additions and 25 deletions

View File

@@ -14,7 +14,7 @@
(defonce loaded? (atom false))
(rum/defcs editor <
(rum/defc editor <
rum/reactive
{:will-mount
(fn [state]
@@ -30,20 +30,17 @@
(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?)
state)}
[config id attr code options]
(let [loaded?' (rum/react loaded?)
theme (state/sub :ui/theme)
code (or code "")
code (string/replace-first code #"\n$" "")] ;; See-also: #3410
(if (or (not loaded?') (rum/react *loading?))
(ui/loading "CodeMirror")
(@lazy-editor config id attr code theme options))))
(ui/lazy-visible
(fn []
(when loaded?' (@lazy-editor config id attr code theme options)))
{:trigger-once? true
:placeholder [:div
{:style {:height (min
(* 23.2 (count (string/split-lines code)))
600)}}]})))

View File

@@ -1,11 +1,9 @@
(ns frontend.extensions.code
(:require [cljs-bean.core :as bean]
[clojure.string :as string]
["codemirror" :as CodeMirror]
(:require ["codemirror" :as CodeMirror]
["codemirror/addon/edit/closebrackets"]
["codemirror/addon/edit/matchbrackets"]
["codemirror/addon/selection/active-line"]
["codemirror/addon/hint/show-hint"]
["codemirror/addon/selection/active-line"]
["codemirror/mode/apl/apl"]
["codemirror/mode/asciiarmor/asciiarmor"]
["codemirror/mode/asn.1/asn.1"]
@@ -128,20 +126,22 @@
["codemirror/mode/yaml-frontmatter/yaml-frontmatter"]
["codemirror/mode/yaml/yaml"]
["codemirror/mode/z80/z80"]
[cljs-bean.core :as bean]
[clojure.string :as string]
[frontend.commands :as commands]
[frontend.config :as config]
[frontend.db :as db]
[frontend.extensions.calc :as calc]
[frontend.handler.editor :as editor-handler]
[frontend.handler.code :as code-handler]
[frontend.handler.editor :as editor-handler]
[frontend.schema.handler.common-config :refer [Config-edn]]
[frontend.state :as state]
[frontend.util :as util]
[frontend.config :as config]
[goog.dom :as gdom]
[goog.object :as gobj]
[frontend.schema.handler.common-config :refer [Config-edn]]
[malli.core :as m]
[rum.core :as rum]
[promesa.core :as p]))
[promesa.core :as p]
[rum.core :as rum]))
;; codemirror
@@ -466,7 +466,7 @@
(when e (util/stop e))
(let [esc? (gobj/get cm "escPressed")]
(when (or (= :file (state/get-current-route))
(not esc?))
(not esc?))
(code-handler/save-code-editor!))
(state/set-block-component-editing-mode! false)
(state/set-state! :editor/code-block-context nil)
@@ -549,6 +549,7 @@
(fn [e]
(.stopPropagation e)))
(.save editor)
(.setSize editor "100%" 600)
(.refresh editor)))
editor))