feat: Lazy load admin pages sitemap

We introduced server side sitemap rendering recently, but large
sitemaps still load several seconds. For better UX we lazy load
the sitemap via a Turbo Frame.

(cherry picked from commit 2220152)

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -8,7 +8,7 @@ class PagesController < ResourcesController
 
       helper "alchemy/pages"
 
-      before_action :load_resource, except: [:index, :flush, :new, :create, :copy_language_tree, :link]
+      before_action :load_resource, except: [:index, :flush, :new, :create, :copy_language_tree, :link, :tree]
 
       authorize_resource class: Alchemy::Page, except: [:index]
 
@@ -60,14 +60,18 @@ def index
           items = items.page(params[:page] || 1).per(items_per_page)
           @pages = items
         elsif @current_language.root_page
-          @root_page = Alchemy::PageTreePreloader.new(
-            page: @current_language.root_page,
-            user: current_alchemy_user,
-            admin_includes: true
-          ).call
+          @root_page = @current_language.root_page
         end
       end
 
+      def tree
+        @root_page = Alchemy::PageTreePreloader.new(
+          page: @current_language.root_page,
+          user: current_alchemy_user,
+          admin_includes: true
+        ).call
+      end
+
       # Used by page preview iframe in Page#edit view.
       #
       def show

app/controllers/alchemy/admin/pages_controller.rb

@@ -64,6 +64,12 @@ alchemy-sitemap {
   min-height: calc(100vh - 148px);
 }
 
+#alchemy_pages_tree {
+  display: block;
+  height: calc(100vh - var(--top-menu-height) - var(--spacing-3));
+  position: relative;
+}
+
 #sitemap {
   padding: 0 0 104px 0;
 

app/stylesheets/alchemy/admin/sitemap.scss

@@ -26,7 +26,9 @@
   <% else %>
     <% if @root_page %>
       <h2 id="page_filter_result">Page filter display</h2>
-      <%= render "sitemap", page_partial: "page" %>
+      <%= turbo_frame_tag "alchemy_pages_tree", src: alchemy.tree_admin_pages_path do %>
+        <alchemy-spinner></alchemy-spinner>
+      <% end %>
     <% elsif can?(:create, Alchemy::Page) %>
       <%= render partial: "create_language_form" %>
     <% else %>

app/views/alchemy/admin/pages/_sitemap.html.erb

@@ -0,0 +1,13 @@
+<%= turbo_frame_tag "alchemy_pages_tree" do %>
+  <h4 id="sitemap_heading">
+    <span class="page_name"><%= Alchemy::Page.human_attribute_name(:name) %></span>
+    <span class="page_urlname"><%= Alchemy::Page.human_attribute_name(:urlname) %></span>
+    <span class="page_status"><%= Alchemy.t(:page_status) %></span>
+  </h4>
+
+  <alchemy-sitemap>
+    <ul id="sitemap" class="list">
+      <%= render Alchemy::Admin::PageNode.new(page: @root_page) %>
+    </ul>
+  </alchemy-sitemap>
+<% end %>

app/views/alchemy/admin/pages/index.html.erb

@@ -26,6 +26,7 @@
         post :copy_language_tree
         get :create_language
         get :link
+        get :tree
       end
       member do
         post :unlock