Fix regression regarding useless toc animation on initial load

Author: mk

src/nextjournal/clerk/render.cljs

@@ -1,5 +1,5 @@
 (ns nextjournal.clerk.render
-  (:require ["framer-motion" :refer [m LazyMotion domAnimation]]
+  (:require ["framer-motion" :refer [motion]]
             ["react" :as react]
             ["react-dom/client" :as react-client]
             ["vh-sticky-table-header" :as sticky-table-header]
@@ -40,25 +40,25 @@
      [:button.text-slate-400.hover:text-slate-600.dark:hover:text-white.cursor-pointer
       {:on-click #(swap! !dark-mode? not)}
       (if @!dark-mode?
-        [:> (.-svg m)
+        [:> (.-svg motion)
          {:xmlns "http://www.w3.org/2000/svg"
           :class "w-5 h-5 md:w-4 md:h-4"
           :viewBox "0 0 50 50"
           :key "moon"}
-         [:> (.-path m)
+         [:> (.-path motion)
           {:d "M 43.81 29.354 C 43.688 28.958 43.413 28.626 43.046 28.432 C 42.679 28.238 42.251 28.198 41.854 28.321 C 36.161 29.886 30.067 28.272 25.894 24.096 C 21.722 19.92 20.113 13.824 21.683 8.133 C 21.848 7.582 21.697 6.985 21.29 6.578 C 20.884 6.172 20.287 6.022 19.736 6.187 C 10.659 8.728 4.691 17.389 5.55 26.776 C 6.408 36.163 13.847 43.598 23.235 44.451 C 32.622 45.304 41.28 39.332 43.816 30.253 C 43.902 29.96 43.9 29.647 43.81 29.354 Z"
            :fill "currentColor"
            :initial "initial"
            :animate "animate"
            :variants {:initial {:scale 0.6 :rotate 90}
                       :animate {:scale 1 :rotate 0 :transition spring}}}]]
-        [:> (.-svg m)
+        [:> (.-svg motion)
          {:key "sun"
           :class "w-5 h-5 md:w-4 md:h-4"
           :viewBox "0 0 24 24"
           :fill "none"
           :xmlns "http://www.w3.org/2000/svg"}
-         [:> (.-circle m)
+         [:> (.-circle motion)
           {:cx "11.9998"
            :cy "11.9998"
            :r "5.75375"
@@ -67,7 +67,7 @@
            :animate "animate"
            :variants {:initial {:scale 1.5}
                       :animate {:scale 1 :transition spring}}}]
-         [:> (.-g m)
+         [:> (.-g motion)
           {:initial "initial"
            :animate "animate"
            :variants {:initial {:rotate 45}
@@ -154,29 +154,29 @@
                                                           (catch js/Error _
                                                             (js/console.warn (str "Clerk render-notebook, invalid hash: "
                                                                                   (.-hash js/location))))))]
-                                 (js/requestAnimationFrame #(.scrollIntoViewIfNeeded heading)))))]
-    [:> LazyMotion {:features domAnimation}
-     [:div.flex
-      {:ref root-ref-fn}
-      [:div.fixed.top-2.left-2.md:left-auto.md:right-2.z-10
-       [dark-mode-toggle !dark-mode?]]
-      (when (and toc toc-visibility)
-        [navbar/view toc (assoc render-opts :set-hash? (not bundle?) :toc-visibility toc-visibility)])
-      [:div.flex-auto.w-screen.scroll-container
-       (into
-        [:> (.-div m)
-         (merge
-          {:key "notebook-viewer"
-           :class (cond-> (or doc-css-class [:flex :flex-col :items-center :notebook-viewer :flex-auto])
-                    sidenotes? (conj :sidenotes-layout))}
-          (when (and toc (not (navbar/mobile?)))
-            (let [inset {:margin-left (if (and toc-visibility (:toc-open? @!expanded-at)) navbar/width 0)}]
-              {:initial inset
-               :animate inset
-               :transition navbar/spring})))]
-        ;; TODO: restore react keys via block-id
-        ;; ^{:key (str processed-block-id "@" @!eval-counter)}
-        (inspect-children render-opts) (concat (when header [header]) xs (when footer [footer])))]]]))
+                                 (js/requestAnimationFrame #(.scrollIntoViewIfNeeded heading)))))
+               _ (swap! !expanded-at merge (navbar/->toc-expanded-at toc toc-visibility))]
+    [:div.flex
+     {:ref root-ref-fn}
+     [:div.fixed.top-2.left-2.md:left-auto.md:right-2.z-10
+      [dark-mode-toggle !dark-mode?]]
+     (when (and toc toc-visibility)
+       [navbar/view toc (assoc render-opts :set-hash? (not bundle?) :toc-visibility toc-visibility)])
+     [:div.flex-auto.w-screen.scroll-container
+      (into
+       [:> (.-div motion)
+        (merge
+         {:key "notebook-viewer"
+          :class (cond-> (or doc-css-class [:flex :flex-col :items-center :notebook-viewer :flex-auto])
+                   sidenotes? (conj :sidenotes-layout))}
+         (when (and toc (not (navbar/mobile?)))
+           (let [inset {:margin-left (if (and toc-visibility (:toc-open? @!expanded-at)) navbar/width 0)}]
+             {:initial inset
+              :animate inset
+              :transition navbar/spring})))]
+       ;; TODO: restore react keys via block-id
+       ;; ^{:key (str processed-block-id "@" @!eval-counter)}
+       (inspect-children render-opts) (concat (when header [header]) xs (when footer [footer])))]]))
 
 (defn opts->query [opts]
   (->> opts

src/nextjournal/clerk/render/navbar.cljs

@@ -1,5 +1,5 @@
 (ns nextjournal.clerk.render.navbar
-  (:require ["framer-motion" :as framer-motion :refer [m AnimatePresence]]
+  (:require ["framer-motion" :as framer-motion :refer [motion AnimatePresence]]
             [applied-science.js-interop :as j]
             [clojure.string :as str]
             [nextjournal.clerk.render.hooks :as hooks]
@@ -109,7 +109,7 @@
 (def spring {:type :spring :duration 0.35 :bounce 0.1})
 
 (defn mobile-backdrop [{:keys [!expanded-at]}]
-  [:> (.-div m)
+  [:> (.-div motion)
    {:key "mobile-toc-backdrop"
     :class "fixed z-10 bg-gray-500 bg-opacity-75 left-0 top-0 bottom-0 right-0"
     :initial {:opacity 0}
@@ -147,7 +147,7 @@
 (def mobile-width 300)
 
 (defn toc-panel [toc {:as render-opts :keys [!expanded-at mobile-toc?]}]
-  [:> (.-div m)
+  [:> (.-div motion)
    (let [inset-or-x (if mobile-toc? :x :margin-left)
          w (if mobile-toc? mobile-width width)]
      {:key "toc-panel"
@@ -165,16 +165,17 @@
      "TOC"]
     [render-items toc render-opts]]])
 
+(defn ->toc-expanded-at [toc toc-visibility]
+  {:toc-open? (if-some [stored-open? (localstorage/get-item local-storage-key)]
+                stored-open?
+                (not= :collapsed toc-visibility))
+   :toc (into {}
+              (map (juxt identity some?))
+              (keep #(when (and (map? %) (:expanded? %)) (:path %)) (tree-seq coll? not-empty toc)))})
+
 (defn view [toc {:as render-opts :keys [!expanded-at toc-visibility]}]
-  (hooks/use-effect
-   (fn []
-     (swap! !expanded-at assoc :toc-open? (if-some [stored-open? (localstorage/get-item local-storage-key)]
-                                           stored-open?
-                                           (not= :collapsed toc-visibility)))
-     (swap! !expanded-at assoc :toc (into {}
-                                         (map (juxt identity some?))
-                                         (keep #(when (and (map? %) (:expanded? %)) (:path %)) (tree-seq coll? not-empty toc)))))
-   [toc])
+  (hooks/use-effect (fn [] (swap! !expanded-at merge (->toc-expanded-at toc toc-visibility)))
+                    [toc toc-visibility])
   (r/with-let [!mobile-toc? (r/atom (mobile?))
                handle-resize #(reset! !mobile-toc? (mobile?))
                ref-fn #(if %