Lazily load home page elements

jahseng-lee · Apr 30, 2024 · d883a16 · d883a16
1 parent 7cf785d
commit d883a16
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 11 deletions.
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
@@ -3,12 +3,28 @@ class HomeController < ApplicationController
 
   skip_before_action :authenticate_user!
 
-  def index
+  def index; end
+
+  def locations
     @pagy, @locations = pagy(
       Location.all
         .includes(:tags)
         .ordered_for_search_results,
       items: 18
     )
+
+    respond_to do |format|
+      format.turbo_stream do
+        render turbo_stream: turbo_stream.replace(
+          "loading-locations",
+          partial: "search_locations/location_search_section",
+          locals: {
+            region: nil,
+            country: nil,
+            locations: @locations
+          }
+        )
+      end
+    end
   end
 end
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -7,13 +7,88 @@
     </div>
   </div>
 
-  <%= render partial: "search_locations/location_search_section",
-    locals: {
-      region: @region,
-      country: @country,
-      locations: @locations,
-    }
-  %>
+  <% if @locations.present? %>
+    <%= render partial: "search_locations/location_search_section",
+      locals: {
+        region: @region,
+        country: @country,
+        locations: @locations
+      }
+    %>
+  <% else %>
+    <% # Show placeholder loading elements %>
+    <%= turbo_frame_tag(
+      "loading-locations",
+      src: locations_home_path(format: :turbo_stream)
+    ) do %>
+      <div>
+        <div class="row mb-3">
+          <div class="col">
+            <select
+                class="form-select"
+                disabled>
+            </select>
+          </div>
+
+          <div class="col">
+            <select
+                class="form-select"
+                disabled>
+            </select>
+          </div>
+        </div>
+
+        <div class="input-group">
+          <%= text_field(
+            "search",
+            :query,
+            disabled: true,
+            class: "form-control",
+          ) %>
+          <span class="input-group-text">
+            <i class="bi bi-search" aria-hidden="true"></i>
+          </span>
+        </div>
+      </div>
+
+      <hr />
+
+      <div class="row row-cols-xl-3 row-cols-md-2 row-cols-1">
+        <% 18.times do %>
+          <div class="col">
+            <div class="location-card card overflow-hidden mb-3">
+              <div class="row g-0">
+                <div class="col-md-4">
+                  <% # normally where the location image would go %>
+                </div>
+                <div class="col-md-8">
+                  <div class="card-body">
+                    <h5 class="card-title placeholder-glow">
+                      <span class="placeholder col-6"></span>
+                    </h5>
+                    <h6 class="card-subtitle mb-2 placeholder-glow">
+                      <span class="placeholder col-8"></span>
+                    </h6>
+                    <p class="card-text placeholder-glow">
+                      <span class="placeholder col-7"></span>
+                      <span class="placeholder col-4"></span>
+                      <span class="placeholder col-4"></span>
+                      <span class="placeholder col-6"></span>
+                      <span class="placeholder col-8"></span>
+                    </p>
+                  </div>
+
+                  <div class="card-footer placeholder-glow">
+                    <span class="placeholder col-7"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
 </div>
 
 <%

diff --git a/app/views/search_locations/_location_search_section.html.erb b/app/views/search_locations/_location_search_section.html.erb
@@ -158,7 +158,9 @@
     <% end %>
   </div>
 
-  <div data-controller="pagy" class="pagination-nav-container">
-    <%== pagy_bootstrap_nav_js(@pagy) %>
-  </div>
+  <% if locations.length != 0 %>
+    <div data-controller="pagy" class="pagination-nav-container">
+      <%== pagy_bootstrap_nav_js(@pagy) %>
+    </div>
+  <% end %>
 </div>
diff --git a/config/routes.rb b/config/routes.rb
@@ -22,6 +22,11 @@
     end
   end
   #resource :choose_plan, only: [:show]
+  resource :home, only: [:index] do
+    collection do
+      get :locations, controller: "home"
+    end
+  end
   resources :issues, only: [:index, :create, :update]
   resources :locations, only: [:show, :edit, :update, :destroy] do
     member do