Add pagination to avoid extremely slow load times

Author: olivierlacan

Gemfile

@@ -36,6 +36,8 @@ gem 'rails_12factor'
 
 gem 'gemoji'
 
+gem 'will_paginate'
+
 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 

Gemfile.lock

@@ -204,6 +204,7 @@ GEM
       binding_of_caller (>= 0.7.2)
       railties (>= 4.0)
       sprockets-rails (>= 2.0, < 4.0)
+    will_paginate (3.1.0)
 
 PLATFORMS
   ruby
@@ -229,6 +230,7 @@ DEPENDENCIES
   turbolinks
   uglifier (>= 1.3.0)
   web-console (~> 2.0)
+  will_paginate
 
 RUBY VERSION
    ruby 2.3.4p301

app/assets/stylesheets/application.sass

@@ -92,3 +92,52 @@ body, main
 
   .well--l
     margin-bottom: $b-space-xl
+
+.pagination
+  border: 1px solid #e5e5e5
+  text-align: center
+  margin: 0 0 1em 0
+  padding: 1em 0
+  cursor: default
+
+  a, span
+    padding: 0 0.4em
+
+  .disabled
+    color: #aaaaaa
+
+  .current
+    font-style: normal
+    font-weight: bold
+    background-color: $c-primary
+    color: $white
+    display: inline-block
+    width: 1.4em
+    height: 1.4em
+    line-height: 1.4
+    border-radius: $b-borderRadius
+
+  a
+    width: 1.4em
+    text-decoration: none
+    color: black
+    border-radius: $b-borderRadius
+    &:hover, &:focus
+      background-color: $c-primary
+      color: white
+
+  .previous_page, .next_page
+    width: auto
+    background-color: $c-primary
+    border-radius: $b-borderRadius
+    border: 1px solid transparent
+    color: $c-text-invert
+    cursor: pointer
+    display: inline-block
+    font-size: $b-fontSize
+    line-height: 2.5
+    padding: 0 $b-space
+    text-align: center
+    text-decoration: none
+    transition: $b-transition
+    white-space: nowrap

app/assets/stylesheets/foundation/_config.sass

@@ -83,7 +83,7 @@ $b-lineHeight: 1.5
 
 // ----- Settings ----- //
 
-$b-transition: 0.3s ease-in-out
+$b-transition: 0.2s ease-in-out
 
 // ----- Sizing ----- //
 
@@ -92,6 +92,7 @@ $b-maxWidth-s: em(700px)
 $b-space: em(20px)
 $b-space-xs: $b-space * 0.25
 $b-space-s: $b-space * 0.5
+$b-space-m: $b-space * 1
 $b-space-l: $b-space * 2
 $b-space-xl: $b-space * 4
 

app/assets/stylesheets/foundation/_tools.sass

@@ -14,6 +14,9 @@
 .mbl
   margin-bottom: $b-space-l
 
+.mbm
+  margin-bottom: $b-space-m
+
 // -------------------------------------
 //   Padding
 // -------------------------------------

app/controllers/compliments_controller.rb

@@ -9,7 +9,7 @@ class ComplimentsController < ApplicationController
   def index
     @compliments = Compliment.includes(
       :complimenter, :complimentee, :uphearts
-    ).public
+    ).public.paginate(page: params[:page], per_page: 30)
   end
 
   def given

app/views/compliments/index.html.haml

@@ -1,4 +1,4 @@
-.split.mbl
+.split.mbm
   .split-cell
 
     %ul.list.list--inline.list--inline--l
@@ -11,10 +11,16 @@
     = link_to "New Compliment", new_compliment_path, class: "btn"
     = link_to "Download My Compliments", received_compliments_path(format: :csv), class: "btn"
 
-- unless @compliments.empty?
+- if @compliments.any?
+  = will_paginate @compliments
+
   .g.collection.collection--1of2
+
     - @compliments.each do |compliment|
       .g-b.g-b--1of2.collection-item
         = render compliment
+
+
+  = will_paginate @compliments
 - else
   %p.pal.tac.tcs.tsi There are no compliments currently. Say something nice :)

config/locales/en.yml

@@ -21,3 +21,8 @@
 
 en:
   hello: "Hello world"
+
+  will_paginate:
+    previous_label: "Previous"
+    next_label: "Next"
+    page_gap: "…"