bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent turbo frames from loading edit forms when previwing cards in collections

Browse Source 
To render N cards we were loading 3xN turbo frames. I suspect this makes staging choke.
This commit is contained in:
Jorge Manrubia
2025-04-02 11:21:30 +02:00
parent d2cd20fe5b
commit 6d716fa932
7 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/helpers/bubbles_helper.rb
+9
View File
@@ -21,4 +21,13 @@ module BubblesHelper
}
end
end
def previewing_card
@previewing_bubble = true
yield
end
def previewing_card?
@previewing_bubble
end
end
app/views/bubbles/_assignees.html.erb
+1 -1
View File
@@ -10,7 +10,7 @@
<span class="for-screen-reader">Assign</span>
</button>
<%= turbo_frame_tag bubble, :assignment, src: new_bucket_bubble_assignment_toggle_path(bubble.bucket, bubble) %>
<%= turbo_frame_tag bubble, :assignment, src: new_bucket_bubble_assignment_toggle_path(bubble.bucket, bubble) unless previewing_card? %>
</div>
</div>
<% end %>
app/views/bubbles/_card.html.erb
+9 -9
View File
@@ -1,9 +1,9 @@
<% cache bubble do %>
<article class="card shadow border flex flex-column position-relative txt-align-start full-width border-radius"
style="--bubble-color: <%= bubble.color %>; view-transition-name: <%= dom_id(bubble, :ticket) %>;"
<article class="card shadow border flex flex-column position-relative txt-align-start full-width border-radius"
style="--bubble-color: <%= bubble.color %>; view-transition-name: <%= dom_id(bubble, :ticket) %>;"
id="<%= dom_id(bubble, :ticket) %>">
<header class="card__header flex align-center gap min-width">
<%= link_to bubble.bucket.name, bubbles_path(bucket_ids: [ bubble.bucket ]),
<%= link_to bubble.bucket.name, bubbles_path(bucket_ids: [ bubble.bucket ]),
class: "card__bucket txt-uppercase overflow-ellipsis txt-reversed" %>
<%= render "bubbles/tags", bubble: bubble %>
@@ -18,9 +18,9 @@
<% end %>
<% else %>
<%= form_with model: bubble, url: bucket_bubble_path(bubble.bucket, bubble), id: "bubble_form", data: { controller: "auto-save" } do |form| %>
<%= form.text_area :title, placeholder: "Name it…",
class: "input input--textarea full-width borderless txt-align-start #{ "fill-highlight" if bubble.creating? }",
autofocus: bubble.title.blank?,
<%= form.text_area :title, placeholder: "Name it…",
class: "input input--textarea full-width borderless txt-align-start #{ "fill-highlight" if bubble.creating? }",
autofocus: bubble.title.blank?,
data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
<% end %>
<% end %>
@@ -29,8 +29,8 @@
<span class="for-screen-reader"><%= bubble_title(bubble) %></span>
<% end %>
</div>
<%= turbo_frame_tag dom_id(bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(bubble.bucket, bubble) %>
<%= turbo_frame_tag dom_id(bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(bubble.bucket, bubble) unless previewing_card? %>
</div>
<footer class="card__footer full-width flex align-start gap">
@@ -50,4 +50,4 @@
</div>
<% end %>
</article>
<% end %>
<% end %>
app/views/bubbles/_card_mini.html.erb
+20 -18
View File
@@ -1,25 +1,27 @@
<div class="card card--mini shadow border flex gap position-relative txt-align-start full-width border-radius" style="view-transition-name: <%= dom_id(bubble, :ticket) %>;">
<%= avatar_image_tag bubble.creator, loading: :lazy, class: "avatar" %>
<% previewing_card do %>
<div class="card card--mini shadow border flex gap position-relative txt-align-start full-width border-radius" style="view-transition-name: <%= dom_id(bubble, :ticket) %>;">
<%= avatar_image_tag bubble.creator, loading: :lazy, class: "avatar" %>
<div class="card__body flex flex-column gap-half full-width flex-item-grow min-width max-width">
<h3 class="card__title">
<%= bubble.title %>
</h3>
<div class="txt-small overflow-ellipsis txt-uppercase"><%= "Added to #{bubble.bucket.name} by #{bubble.creator.name}" %> <%=
<div class="card__body flex flex-column gap-half full-width flex-item-grow min-width max-width">
<h3 class="card__title">
<%= bubble.title %>
</h3>
<div class="txt-small overflow-ellipsis txt-uppercase"><%= "Added to #{bubble.bucket.name} by #{bubble.creator.name}" %> <%=
days = (Date.current - bubble.created_at.to_date).to_i
case days
when 0 then "today"
when 1 then "yesterday"
else "#{days} days ago".html_safe
when 0 then "today"
when 1 then "yesterday"
else "#{days} days ago".html_safe
end
%></div>
<div class="card__stuff flex align-center gap">
<%= render "bubbles/assignees", bubble: bubble %>
<div class="overflow-ellipsis"><%= render "bubbles/tags", bubble: bubble %></div>
<div class="card__stuff flex align-center gap">
<%= render "bubbles/assignees", bubble: bubble %>
<div class="overflow-ellipsis"><%= render "bubbles/tags", bubble: bubble %></div>
</div>
</div>
</div>
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "card__link" do %>
<span class="for-screen-reader"><%= bubble_title(bubble) %></span>
<% end %>
</div>
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "card__link" do %>
<span class="for-screen-reader"><%= bubble_title(bubble) %></span>
<% end %>
</div>
<% end %>
app/views/bubbles/_card_preview.html.erb
+3
View File
@@ -0,0 +1,3 @@
<% previewing_card do %>
<%= render "bubbles/card", bubble: bubble %>
<% end %>
app/views/bubbles/_tags.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
<span class="for-screen-reader">Add a tag</span>
</button>
<%= turbo_frame_tag bubble, :tagging, src: new_bucket_bubble_tagging_toggle_path(bubble.bucket, bubble) %>
<%= turbo_frame_tag bubble, :tagging, src: new_bucket_bubble_tagging_toggle_path(bubble.bucket, bubble) unless previewing_card? %>
</div>
</div>
<% end %>
app/views/bubbles/index.html.erb
+10 -10
View File
@@ -28,7 +28,7 @@
<dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
<strong class="popup__title margin-block-start-half pad-inline-half">In Collection</strong>
<%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
<%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
data: { controller: "form" } do |form| %>
<% @filter.as_params.except(:bucket_ids).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -37,10 +37,10 @@
<%= link_to bubbles_path(@filter.as_params.except(:bucket_ids)), class: "btn popup__item" do %>
<span class="overflow-ellipsis">All collections</span>
<% end %>
<% Current.user.buckets.order(:name).each do |bucket| %>
<div class="btn popup__item">
<%= form.check_box "bucket_ids[]", {
<%= form.check_box "bucket_ids[]", {
checked: @filter.buckets.include?(bucket),
data: { action: "change->form#submit" },
include_hidden: false,
@@ -59,15 +59,15 @@
<% @filter.as_params.except(:indexed_by).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
<% end %>
<%= form.hidden_field :indexed_by, value: @filter.indexed_by == "oldest" ? "newest" : "oldest" %>
<button class="btn borderless txt-medium">
<%= icon_tag @filter.indexed_by == "oldest" ? "sort-ascending" : "sort-descending", size: 24, aria: { hidden: true } %>
<span class="for-screen-reader">Sort by <%= @filter.indexed_by == "oldest" ? "newest" : "oldest" %></span>
</button>
<% end %>
</div>
</div>
</header>
<% if (bucket = @filter.buckets.first) && @filter.buckets.one? %>
@@ -115,7 +115,7 @@
aria-label="In stage…" aria-description="In stage…"
data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
<strong class="popup__title margin-block-start-half pad-inline-half">In stage(s)…</strong>
<%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
<%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
data: { controller: "form" } do |form| %>
<% @filter.as_params.except(:stage_ids).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -124,7 +124,7 @@
<%= link_to bubbles_path(@filter.as_params.except(:stage_ids)), class: "btn popup__item" do %>
<span class="overflow-ellipsis">All stages</span>
<% end %>
<% workflow.stages.each do |stage| %>
<div class="btn popup__item">
<%= form.check_box :stage_ids, {
@@ -148,7 +148,7 @@
<% end %>
<% if (staged_bubbles = @bubbles.where.not(stage: nil)).any? %>
<%= render partial: "bubbles/card", collection: staged_bubbles, as: :bubble, cached: true %>
<%= render partial: "bubbles/card_preview", collection: staged_bubbles, as: :bubble, cached: true %>
<% else %>
<p class="txt-medium translucent">Nothing here</p>
<% end %>
@@ -161,7 +161,7 @@
</h2>
<section class="cards--grid">
<% if (popped_bubbles = Filter.from_params(@filter.as_params.except(:stage_ids).merge(indexed_by: "popped")).tap { |f| f.creator = Current.user }.bubbles).any? %>
<%= render partial: "bubbles/card", collection: popped_bubbles, as: :bubble, cached: true %>
<%= render partial: "bubbles/card_preview", collection: popped_bubbles, as: :bubble, cached: true %>
<% else %>
<p class="txt-medium translucent">Nothing here</p>
<% end %>