✨ Add lazy loading for highlightjs on code-block component

Mainly because highlight.js is a heavy library but only used
on a very concrete situations, so it does not make sense to load
it all the time.

frontend/src/app/main/ui/components/code_block.cljs

@@ -7,12 +7,15 @@
 (ns app.main.ui.components.code-block
   (:require-macros [app.main.style :as stl])
   (:require
-   ["highlight.js" :as hljs]
    [app.common.data.macros :as dm]
    [app.main.ui.context :as ctx]
-   [app.util.dom :as dom]
    [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
+   [promesa.core :as p]
+   [rumext.v2 :as mf]
+   [shadow.lazy :as lazy]))
+
+(def highlight-fn
+  (lazy/loadable app.util.code-highlight/highlight!))
 
 (mf/defc code-block
   {::mf/wrap-props false}
@@ -20,11 +23,11 @@
   (let [new-css-system (mf/use-ctx ctx/new-css-system)
         block-ref (mf/use-ref)
         code (str/trim code)]
-    (mf/with-effect
-      [code type]
+
+    (mf/with-effect [code type]
       (when-let [node (mf/ref-val block-ref)]
-        (dom/set-data! node "highlighted" nil)
-        (hljs/highlightElement node)))
+        (p/let [highlight-fn (lazy/load highlight-fn)]
+          (highlight-fn node))))
 
     (if new-css-system
       [:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code]

frontend/src/app/util/code_highlight.cljs

@@ -0,0 +1,15 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.util.code-highlight
+  (:require
+   ["highlight.js" :as hljs]
+   [app.util.dom :as dom]))
+
+(defn highlight!
+  [node]
+  (dom/set-data! node "highlighted" nil)
+  (hljs/highlightElement node))