From 247d91b99de256465001590b9b77c91df1942f9c Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach@maybe.co>
Date: Tue, 28 Jan 2025 12:03:43 -0500
Subject: [PATCH] Lazy load synth logos (#1731)

---
 app/views/account/holdings/_holding.html.erb         | 2 +-
 app/views/account/holdings/show.html.erb             | 2 +-
 app/views/account/transactions/_transaction.html.erb | 2 +-
 app/views/plaid_items/_plaid_item.html.erb           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/account/holdings/_holding.html.erb b/app/views/account/holdings/_holding.html.erb
index c70e6515..e33f4f54 100644
--- a/app/views/account/holdings/_holding.html.erb
+++ b/app/views/account/holdings/_holding.html.erb
@@ -3,7 +3,7 @@
 <%= turbo_frame_tag dom_id(holding) do %>
   <div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4">
     <div class="col-span-4 flex items-center gap-4">
-      <%= image_tag "https://logo.synthfinance.com/ticker/#{holding.ticker}", class: "w-9 h-9 rounded-full" %>
+      <%= image_tag "https://logo.synthfinance.com/ticker/#{holding.ticker}", class: "w-9 h-9 rounded-full", loading: "lazy" %>
 
       <div class="space-y-0.5">
         <%= link_to holding.name, account_holding_path(holding), data: { turbo_frame: :drawer }, class: "hover:underline" %>
diff --git a/app/views/account/holdings/show.html.erb b/app/views/account/holdings/show.html.erb
index 92475cf1..390964b7 100644
--- a/app/views/account/holdings/show.html.erb
+++ b/app/views/account/holdings/show.html.erb
@@ -6,7 +6,7 @@
         <%= tag.p @holding.ticker, class: "text-sm text-gray-500" %>
       </div>
 
-      <%= image_tag "https://logo.synthfinance.com/ticker/#{@holding.ticker}", class: "w-9 h-9 rounded-full" %>
+      <%= image_tag "https://logo.synthfinance.com/ticker/#{@holding.ticker}", loading: "lazy", class: "w-9 h-9 rounded-full" %>
     </header>
 
     <details class="group space-y-2" open>
diff --git a/app/views/account/transactions/_transaction.html.erb b/app/views/account/transactions/_transaction.html.erb
index 03b01e1d..ce6cd187 100644
--- a/app/views/account/transactions/_transaction.html.erb
+++ b/app/views/account/transactions/_transaction.html.erb
@@ -13,7 +13,7 @@
     <div class="max-w-full">
       <%= content_tag :div, class: ["flex items-center gap-2"] do %>
         <% if transaction.merchant&.icon_url %>
-          <%= image_tag transaction.merchant.icon_url, class: "w-6 h-6 rounded-full" %>
+          <%= image_tag transaction.merchant.icon_url, class: "w-6 h-6 rounded-full", loading: "lazy" %>
         <% else %>
           <%= render "shared/circle_logo", name: entry.display_name, size: "sm" %>
         <% end %>
diff --git a/app/views/plaid_items/_plaid_item.html.erb b/app/views/plaid_items/_plaid_item.html.erb
index fc1f99e0..895af1cf 100644
--- a/app/views/plaid_items/_plaid_item.html.erb
+++ b/app/views/plaid_items/_plaid_item.html.erb
@@ -8,7 +8,7 @@
 
         <div class="flex items-center justify-center h-8 w-8 bg-blue-600/10 rounded-full bg-black/5">
           <% if plaid_item.logo.attached? %>
-            <%= image_tag plaid_item.logo, class: "rounded-full h-full w-full" %>
+            <%= image_tag plaid_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
           <% else %>
             <div class="flex items-center justify-center">
               <%= tag.p plaid_item.name.first.upcase, class: "text-blue-600 text-xs font-medium" %>