Don't render cell initial data and make a request instead

assets/js/cell/index.js

@@ -18,17 +18,14 @@ import Markdown from "./markdown";
  *   * `data-type` - editor type (i.e. language), either "markdown" or "elixir" is expected
  *   * `data-focused` - whether the cell is currently focused
  *   * `data-expanded` - whether the cell is currently expanded (relevant for markdown cells)
- *
- * Additionally the root element should have a `div[data-init]` child (rendered once)
- * holding the initial data rendered only once:
- *
- *   * `data-source` - the initial cell source
- *   * `data-revision` - the initial cell revision corresponding to the source
  */
 const Cell = {
   mounted() {
     this.props = getProps(this);
 
+    this.pushEvent("cell_init", { cell_id: this.props.cellId }, (payload) => {
+      const { source, revision } = payload;
+
       const editorContainer = this.el.querySelector("[data-editor-container]");
       // Remove the content placeholder.
       editorContainer.firstElementChild.remove();
@@ -41,8 +38,8 @@ const Cell = {
         editorElement,
         this.props.cellId,
         this.props.type,
-      this.props.init.source,
+        source,
-      this.props.init.revision
+        revision
       );
 
       // Setup markdown rendering.
@@ -50,12 +47,13 @@ const Cell = {
         const markdownContainer = this.el.querySelector(
           "[data-markdown-container]"
         );
-      const markdown = new Markdown(markdownContainer, this.props.init.source);
+        const markdown = new Markdown(markdownContainer, source);
 
         this.liveEditor.onChange((newSource) => {
           markdown.setContent(newSource);
         });
       }
+    });
   },
 
   updated() {
@@ -73,17 +71,11 @@ const Cell = {
 };
 
 function getProps(hook) {
-  const initElement = hook.el.querySelector("[data-init]");
-
   return {
     cellId: getAttributeOrThrow(hook.el, "data-cell-id"),
     type: getAttributeOrThrow(hook.el, "data-type"),
     isFocused: getAttributeOrThrow(hook.el, "data-focused", parseBoolean),
     isExpanded: getAttributeOrThrow(hook.el, "data-expanded", parseBoolean),
-    init: {
-      source: getAttributeOrThrow(initElement, "data-source"),
-      revision: getAttributeOrThrow(initElement, "data-revision", parseInteger),
-    },
   };
 }
 

lib/live_book_web/live/cell.ex

@@ -10,11 +10,6 @@ defmodule LiveBookWeb.Cell do
          data-focused="<%= @focused %>"
          data-expanded="<%= @expanded %>"
          class="flex flex-col relative mr-10 border-l-4 pl-4 -ml-4 border-blue-100 border-opacity-0 hover:border-opacity-100 <%= if @focused, do: "border-blue-300 border-opacity-100"%>">
-      <div id="init-container-<%= @cell.id %>" phx-update="ignore">
-        <div data-init data-source="<%= @cell.source %>" data-revision="<%= @cell_info.revision %>">
-        </div>
-      </div>
-
       <%= render_cell_content(assigns) %>
     </div>
     """
@@ -33,7 +28,7 @@ defmodule LiveBookWeb.Cell do
     </div>
 
     <div class="markdown" data-markdown-container id="markdown-container-<%= @cell.id %>" phx-update="ignore">
-      <%= render_markdown_content_placeholder() %>
+      <%= render_markdown_content_placeholder(@cell.source) %>
     </div>
     """
   end
@@ -59,7 +54,7 @@ defmodule LiveBookWeb.Cell do
          data-editor-container
          id="editor-container-<%= cell.id %>"
          phx-update="ignore">
-      <%= render_editor_content_placeholder() %>
+      <%= render_editor_content_placeholder(cell.source) %>
     </div>
     """
   end
@@ -68,7 +63,13 @@ defmodule LiveBookWeb.Cell do
   # There may be a tiny delay before the markdown is rendered
   # or and editors are mounted, so show neat placeholders immediately.
 
-  defp render_markdown_content_placeholder() do
+  defp render_markdown_content_placeholder("" = _content) do
+    ~E"""
+    <div class="h-4"></div>
+    """
+  end
+
+  defp render_markdown_content_placeholder(_content) do
     ~E"""
     <div class="max-w-2xl w-full animate-pulse">
       <div class="flex-1 space-y-4">
@@ -80,7 +81,13 @@ defmodule LiveBookWeb.Cell do
     """
   end
 
-  defp render_editor_content_placeholder() do
+  defp render_editor_content_placeholder("" = _content) do
+    ~E"""
+    <div class="h-4"></div>
+    """
+  end
+
+  defp render_editor_content_placeholder(_content) do
     ~E"""
     <div class="px-8 max-w-2xl w-full animate-pulse">
       <div class="flex-1 space-y-4 py-1">

lib/live_book_web/live/session_live.ex

@@ -88,6 +88,23 @@ defmodule LiveBookWeb.SessionLive do
   end
 
   @impl true
+  def handle_event("cell_init", %{"cell_id" => cell_id}, socket) do
+    data = socket.assigns.data
+
+    case Notebook.fetch_cell_and_section(data.notebook, cell_id) do
+      {:ok, cell, _section} ->
+        payload = %{
+          source: cell.source,
+          revision: data.cell_infos[cell.id].revision
+        }
+
+        {:reply, payload, socket}
+
+      :error ->
+        {:noreply, socket}
+    end
+  end
+
   def handle_event("add_section", _params, socket) do
     end_index = length(socket.assigns.data.notebook.sections)
     Session.insert_section(socket.assigns.session_id, end_index)