From b64bf6111deb1c8da58332a09069786f19a0562a Mon Sep 17 00:00:00 2001
From: Zee <50284+zspencer@users.noreply.github.com>
Date: Wed, 31 May 2023 18:11:06 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B8=20`Marketplace`:=20`Product::Photo?=
 =?UTF-8?q?s`=20don't=20reflow=20the=20page=20(#1517)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- https://github.com/zinc-collective/convene/issues/1326
- https://github.com/zinc-collective/convene/issues/1428

Depending on device bandwidth, even 150x150 `Product::Photo`s can
take a quarter to a half second to load.

When the photo does not have a set height; this results in the page
re-flowing as the photo loads in.

To Test:

- Add several `Products` with a `Product::Photo` to a `Marketplace`
- Throttle your network connection to 2g (Firefox DevTools can do this)
- Visit the `Marketplace`
  - Before: `Product`s would "bump" down the page as the photos load.
  - After: `Product`s stay in the same dang place, even as the photos load

Reference:
- https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/
  (Note: While this talks about lazy-loaded images, the principal of
   "set the height and width of the image!" still applies)
---
 app/furniture/marketplace/cart_product_component.html.erb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/furniture/marketplace/cart_product_component.html.erb b/app/furniture/marketplace/cart_product_component.html.erb
index f69b0107a..8af527a27 100644
--- a/app/furniture/marketplace/cart_product_component.html.erb
+++ b/app/furniture/marketplace/cart_product_component.html.erb
@@ -1,10 +1,10 @@
 <tr id="<%= dom_id %>">
   <td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
     <%- if product.photo.present? %>
-      <figure>
-        <%= image_tag product.photo.variant(resize_to_limit: [150, 150]).processed.url, class: "rounded-lg"
+      <figure class="w-40 text-center relative">
+        <%= image_tag product.photo.variant(resize_to_limit: [150, 150]).processed.url, class: "mx-auto h-40 overflow-hidden object-center rounded-lg"
  %>
-        <figcaption class="text-center py-2">
+        <figcaption class="mt-2">
           <%=product.name%>
         </figcaption>
       </figure>