Skip to content

Commit c57a923

Browse files
jmilljr24jmilljr24
authored
Workshop Index - lazy load (#588)
* lazy load workshops * add back workshop coutn * add empty string for initial load * fix merge
1 parent 6dba394 commit c57a923

File tree

4 files changed

+96
-33
lines changed

4 files changed

+96
-33
lines changed

‎app/controllers/workshops_controller.rb‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
# frozen_string_literal: true
22

33
class WorkshopsController < ApplicationController
4-
54
def index
6-
search_service = WorkshopSearchService.new(params,
7-
super_user: current_user.super_user?).call
8-
@sort = search_service.sort
9-
10-
@workshops = search_service.workshops
11-
.includes(:categories, :sectors, :windows_type, :user, :images, :bookmarks)
12-
.paginate(page: params[:page], per_page: params[:per_page] || 50)
13-
14-
@workshops_count = search_service.workshops.size
15-
165
@category_types = CategoryType.includes(:categories).published.decorate
176
@sectors = Sector.published
187
@windows_types = WindowsType.all
8+
if turbo_frame_request?
9+
search_service = WorkshopSearchService.new(params,
10+
super_user: current_user.super_user?).call
11+
@sort = search_service.sort
1912

20-
respond_to do |format|
21-
format.html
13+
@workshops = search_service.workshops
14+
.includes(:categories, :sectors, :windows_type, :user, :images, :bookmarks)
15+
.paginate(page: params[:page], per_page: params[:per_page] || 50)
16+
17+
@workshops_count = search_service.workshops.size
18+
19+
render :workshop_results
20+
else
21+
render :index
2222
end
2323
end
2424

‎app/views/workshops/_workshops_count.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<hr class="border-gray-300 my-6">
33
<div class="filters-applied w-full flex gap-3 items-center">
44
<h3 class="text-sm font-semibold uppercase text-gray-500 tracking-wide">
5-
Workshops (<%= @workshops_count %>)
5+
Workshops (<%= @workshops&.total_entries || "" %>)
66
</h3>
77
<%= render "shared/copy_url" %>
88
</div>

‎app/views/workshops/index.html.erb‎

Lines changed: 59 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
<!-- Search Form -->
2626
<div class="w-full">
2727
<%= form_tag(workshops_path, method: :get,
28-
data: {turbo_stream: true, turbo_frame: "frame_list",
29-
controller: "collection share-url"}, class: "space-y-6") do %>
28+
data: {turbo_stream: true, turbo_frame: "workshop_results",
29+
controller: "collection share-url"}, autocomplete: "off", class: "space-y-6") do %>
3030
<%= render "filters" %>
3131
<div><hr class="border-gray-300 my-6"></div>
3232

@@ -46,24 +46,64 @@
4646
<% end %>
4747

4848
<!-- Workshops List -->
49-
<%= turbo_frame_tag "frame_list" do %>
50-
<%= turbo_stream.replace("filters_applied", partial: "filters_applied") %>
51-
<%= turbo_stream.replace("workshops_count", partial: "workshops_count") %>
52-
<%= turbo_stream.replace("copy_url", partial: "shared/copy_url") %>
49+
<%= turbo_frame_tag "workshop_results", src: workshops_path do %>
50+
<%= render "workshops_count" %>
5351
<div class="mt-6">
54-
<% if @workshops.any? %>
55-
<div id="workshops-list" class="space-y-4 animate-fade">
56-
<% @workshops.each do |workshop| %>
57-
<%= render "workshops/index_row", workshop: workshop.decorate,
58-
breadcrumb: "Workshops", link_route: workshop_path(workshop) %>
59-
<% end %>
60-
</div>
61-
<div class="pagination flex justify-center mt-12"><%= tailwind_paginate @workshops %></div>
62-
<% else %>
63-
<p class="text-gray-600">
64-
Your search returned no results. Please try again.
65-
</p>
66-
<% end %>
52+
<div class="space-y-4 animate-pulse">
53+
<% 3.times do %>
54+
<div class="flex flex-col sm:flex-row border-b border-gray-200 bg-white gap-4 p-4">
55+
<!-- 1️⃣ Image skeleton -->
56+
<div class="flex-shrink-0 w-full sm:w-32 h-32 sm:h-24 bg-gray-200 rounded"></div>
57+
58+
<!-- Content -->
59+
<div class="flex flex-col sm:flex-row gap-4 flex-1">
60+
<!-- Title / metadata -->
61+
<div class="flex flex-1 gap-4">
62+
<!-- Bookmark placeholder -->
63+
<div class="flex-shrink-0 pt-1 w-6">
64+
<div class="w-5 h-5 bg-gray-200 rounded"></div>
65+
</div>
66+
67+
<!-- Title + metadata -->
68+
<div class="flex flex-col gap-2 flex-1 min-w-0">
69+
<!-- Badge -->
70+
<div class="h-5 w-32 bg-gray-200 rounded-full"></div>
71+
72+
<!-- Title -->
73+
<div class="h-6 w-3/4 bg-gray-300 rounded"></div>
74+
75+
<!-- Author + date -->
76+
<div class="h-4 w-1/2 bg-gray-200 rounded"></div>
77+
78+
<!-- Bookmark count -->
79+
<div class="h-4 w-40 bg-gray-200 rounded"></div>
80+
81+
<!-- Age ranges -->
82+
<div class="h-4 w-48 bg-gray-200 rounded"></div>
83+
</div>
84+
</div>
85+
86+
<!-- Description -->
87+
<div class="flex flex-1 gap-4 pr-4 sm:pr-3">
88+
<!-- Empty bookmark spacer -->
89+
<div class="w-6 flex-shrink-0"></div>
90+
91+
<!-- Description text -->
92+
<div class="flex-1 space-y-2">
93+
<div class="h-4 w-full bg-gray-200 rounded"></div>
94+
95+
<div class="h-4 w-5/6 bg-gray-200 rounded"></div>
96+
97+
<div class="h-4 w-2/3 bg-gray-200 rounded"></div>
98+
99+
<!-- Tags -->
100+
<div class="mt-3 h-4 w-1/2 bg-gray-200 rounded"></div>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
<% end %>
106+
</div>
67107
</div>
68108
<% end %>
69109
</div>

‎app/views/workshops/workshop_results.html.erb‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<%= turbo_frame_tag :workshop_results do %>
2+
<%= turbo_stream.replace("filters_applied", partial: "filters_applied") %>
3+
4+
<%= turbo_stream.replace("workshops_count", partial: "workshops_count") %>
5+
6+
<%= turbo_stream.replace("copy_url", partial: "shared/copy_url") %>
7+
8+
<div class="mt-6">
9+
<% if @workshops.any? %>
10+
<div id="workshops-list" class="space-y-4 animate-fade">
11+
<% @workshops.each do |workshop| %>
12+
<%= render "workshops/index_row", workshop: workshop.decorate,
13+
breadcrumb: "Workshops", link_route: workshop_path(workshop) %>
14+
<% end %>
15+
</div>
16+
<div class="pagination flex justify-center mt-12"><%= tailwind_paginate @workshops %></div>
17+
<% else %>
18+
<p class="text-gray-600">
19+
Your search returned no results. Please try again.
20+
</p>
21+
<% end %>
22+
</div>
23+
<% end %>

0 commit comments

Comments
 (0)