feat(performance): Preload picture thumbs to avoid N+1 queries

When rendering element editors, each picture's thumbnail_url was
triggering an individual query to find the thumb by signature. Now
thumbs are preloaded in batch via the ElementTreePreloader's call
to Picture.preload_for_element_editor.

Author: tvdeyen

app/models/alchemy/picture.rb

@@ -134,21 +134,26 @@ def file_formats(scope = all)
         Alchemy.storage_adapter.file_formats(name, scope:)
       end
 
-      # Preload descriptions for element editor display
+      # Preload associations for element editor display
       #
       # @param pictures [Array<Picture>] Collection of pictures to preload for
       # @param language [Alchemy::Language] Current language for descriptions
       def alchemy_element_preloads(pictures, language:)
         return if pictures.blank? || language.nil?
 
         picture_ids = pictures.map(&:id).uniq
+
+        # Preload descriptions
         descriptions = Alchemy::PictureDescription
           .where(picture_id: picture_ids, language: language)
           .index_by(&:picture_id)
 
         pictures.each do |picture|
           picture.instance_variable_set(:@preloaded_description, descriptions[picture.id])
         end
+
+        # Preload storage-specific associations to avoid N+1 when rendering thumbnails
+        Alchemy.storage_adapter.preload_picture_associations(pictures)
       end
     end
 

app/models/alchemy/storage_adapter.rb

@@ -25,6 +25,7 @@ class UnknownAdapterError < StandardError; end
       :image_file_size,
       :image_file_width,
       :picture_url_class,
+      :preload_picture_associations,
       :preloaded_pictures,
       :preprocessor_class,
       :ransackable_associations,

app/models/alchemy/storage_adapter/active_storage.rb

@@ -188,6 +188,15 @@ def preloaded_pictures(pictures)
         pictures.with_attached_image_file
       end
 
+      # Preload picture associations on already-loaded records
+      # @param [Array<Alchemy::Picture>] pictures
+      def preload_picture_associations(pictures)
+        ActiveRecord::Associations::Preloader.new(
+          records: pictures,
+          associations: {image_file_attachment: :blob}
+        ).call
+      end
+
       # @param [Alchemy::Attachment]
       # @return [TrueClass, FalseClass]
       def set_attachment_name?(attachment)

app/models/alchemy/storage_adapter/dragonfly.rb

@@ -213,6 +213,15 @@ def preloaded_pictures(pictures)
         pictures.includes(:thumbs)
       end
 
+      # Preload picture associations on already-loaded records
+      # @param [Array<Alchemy::Picture>] pictures
+      def preload_picture_associations(pictures)
+        ActiveRecord::Associations::Preloader.new(
+          records: pictures,
+          associations: :thumbs
+        ).call
+      end
+
       # @param [Alchemy::Attachment]
       # @return [TrueClass, FalseClass]
       def set_attachment_name?(attachment)

spec/models/alchemy/picture_spec.rb

@@ -394,14 +394,28 @@ module Alchemy
           expect(picture2.instance_variable_get(:@preloaded_description)).to eq(description2)
         end
 
-        it "uses only one query for all descriptions" do
-          query_count = 0
-          counter = ->(*, _) { query_count += 1 }
-          ActiveSupport::Notifications.subscribed(counter, "sql.active_record") do
+        it "preloads descriptions and thumbs", if: Alchemy.storage_adapter.dragonfly? do
+          # 1 query for descriptions + 1 query for thumbs
+          expect {
             described_class.alchemy_element_preloads([picture1, picture2], language: language)
-          end
+          }.to make_database_queries(count: 2)
+
+          expect(picture1.association(:thumbs)).to be_loaded
+          expect(picture2.association(:thumbs)).to be_loaded
+        end
+
+        it "preloads descriptions and image file", if: Alchemy.storage_adapter.active_storage? do
+          # Reload pictures to clear already-loaded associations from factory
+          reloaded1 = Picture.find(picture1.id)
+          reloaded2 = Picture.find(picture2.id)
+
+          # 1 query for descriptions + 2 queries for image_file_attachment + blob
+          expect {
+            described_class.alchemy_element_preloads([reloaded1, reloaded2], language: language)
+          }.to make_database_queries(count: 3)
 
-          expect(query_count).to eq(1)
+          expect(reloaded1.association(:image_file_attachment)).to be_loaded
+          expect(reloaded2.association(:image_file_attachment)).to be_loaded
         end
       end
 

spec/services/alchemy/element_preloader_spec.rb

@@ -175,7 +175,7 @@
 
         # Queries are bounded regardless of element count (8 elements created)
         # Root elements, all elements, ingredients, related objects, tags
-        # No language passed, so no description preloading
+        # No language passed, so no description/thumb preloading
         expect {
           result = described_class.new(elements: elements).call
 
@@ -269,9 +269,11 @@
         elements = page_version.elements.not_nested.order(:position)
 
         # Expected queries:
-        # Root elements (2x from includes), all elements, ingredients (2x),
-        # related objects (2x), tags (2x), picture descriptions
+        # Root elements, all elements, ingredients, related objects, tags,
+        # picture descriptions, picture storage associations (thumbs for Dragonfly, attachment+blob for ActiveStorage)
         # No additional queries when accessing descriptions (preloaded)
+        expected_queries = Alchemy.storage_adapter.dragonfly? ? 11 : 12
+
         expect {
           preloaded = described_class.new(elements: elements, language: language).call
 
@@ -283,7 +285,7 @@
               end
             end
           end
-        }.to make_database_queries(count: 10)
+        }.to make_database_queries(count: expected_queries)
       end
     end