Added pagination of screenshots to reduce loading times

app/controllers/packages_controller.rb

@@ -13,11 +13,23 @@ class PackagesController < ApplicationController
   def details
     # TODO: Get only screenshots visible to the user (admin or owner or approved)
     @package = Package.find_by(name: params[:name])
-    
+
     unless @package
       @packagename = params[:name]
       render 'notfound'
     end
+
+    # The first page of screenshots (if there are multiple at all) shows the
+    # first image twice as large. So the first page contains 5 images while
+    # the second and further page contain 6 images.
+    @page = params[:page]
+    @images_per_page = if @page.to_i < 2
+      5
+    else
+      6
+    end
+    # raise
+    @screenshots = screenshots_visible_to_user(@package).paginate(page: @page, per_page: @images_per_page)
   end
   
   # Show upload form for new images
@@ -331,4 +343,19 @@ class PackagesController < ApplicationController
     return false
   end
 
+  def screenshots_visible_to_user(package)
+    if user_signed_in? and current_user.is_admin?
+      # User is an admin and can view all screenshots
+      package.screenshots
+    # TODO: User logins and assigned screenshots will come in a later version
+    # elsif user_signed_in?
+    #   package.screenshots.where(id: (current_user.screenshots.select(:id))) | \
+    #   package.screenshots.where(approved: true).order('created_at DESC')
+    else
+      package.screenshots.where(uploaderhash: session.id.to_s).or(
+        package.screenshots.where(approved: true)
+      )
+      .order('created_at DESC')
+    end
+  end
 end

app/helpers/packages_helper.rb

@@ -5,19 +5,19 @@ module PackagesHelper
   # - approved (public) screenshots
   # - screenshots uploaded by the user
   # - all screenshots if the user is an admin
-  def screenshots_visible_to_user(package)
+  # def screenshots_visible_to_user(package)
-    if user_signed_in? and current_user.is_admin?
+  #   if user_signed_in? and current_user.is_admin?
-      # User is an admin and can view all screenshots
+  #     # User is an admin and can view all screenshots
-      package.screenshots
+  #     package.screenshots
-    # TODO: User logins and assigned screenshots will come in a later version
+  #   # TODO: User logins and assigned screenshots will come in a later version
-    # elsif user_signed_in?
+  #   # elsif user_signed_in?
-    #   package.screenshots.where(id: (current_user.screenshots.select(:id))) | \
+  #   #   package.screenshots.where(id: (current_user.screenshots.select(:id))) | \
-    #   package.screenshots.where(approved: true).order('created_at DESC')
+  #   #   package.screenshots.where(approved: true).order('created_at DESC')
-    else
+  #   else
-      package.screenshots.where(uploaderhash: session.id.to_s) | \
+  #     package.screenshots.where(uploaderhash: session.id.to_s) | \
-      package.screenshots.where(approved: true).order('created_at DESC')
+  #     package.screenshots.where(approved: true).order('created_at DESC')
-    end
+  #   end
-  end
+  # end
 
   def screenshot_uploaded_by_current_user?(screenshot)
     screenshot.uploaderhash == session.id.to_s

app/views/packages/details.slim

@@ -10,14 +10,14 @@
   .grid-x.grid-margin-x
     .small-7.medium-7.cell
       / Left column contains images
-      - if screenshots_visible_to_user(@package).count > 0
+      - if @screenshots.count > 0
         .grid-x.grid-margin-y.grid-margin-x.align-middle
-          - screenshots_visible_to_user(@package).each_with_index do |screenshot, idx|
-            / Display the first screenshot as a large image
-            - if idx==0
           / TODO: paginator at the top looks ugly. maybe more space? or put it into the box on the right?
           = render(partial: 'packages/paginator', locals: {items: @screenshots})
 
+          - @screenshots.each_with_index do |screenshot, idx|
+            / Display the first screenshot as a large image (on the first page only)
+            - if idx==0 && @page.to_i<2
               .small-12.medium-12.cell
                 .margin-bottom-3
                   = render(partial:'medium_image', locals: {screenshot: screenshot})

app/views/packages/grid.slim

@@ -2,7 +2,7 @@
 .grid-x
   .small-6.medium-8.large-9.cell
     // Paginator
-    = render 'packages/paginator'
+    = render(partial: 'packages/paginator', locals: {items: @packages})
 
   .small-6.medium-4.large-3.cell
     // Search form
@@ -21,7 +21,7 @@
       = render 'packages/noresults'
 
     // Paginator
-    = render 'packages/paginator'
+    = render(partial: 'packages/paginator', locals: {items: @packages})
 
   // Icon sidebar for options and views
   .small-3.large-2.cell