Improve speed of transactions page (#1752)

* Make demo data more realistic

* Fix N+1 transactions query

* Lint fixes

* Totals query

* Consolidate stats calcs

* Fix preload

* Fix filter clearing

* Fix N+1 queries for family sync detection

* Reduce queries for rendering transfers

* Fix tests

* Remove flaky test

app/views/account/trades/index.html.erb

@@ -32,7 +32,7 @@
         <p class="text-gray-500 py-4"><%= t(".no_trades") %></p>
       <% else %>
         <div class="space-y-6">
-          <%= entries_by_date(@entries) do |entries| %>
+          <%= entries_by_date(@entries) do |entries, _transfers| %>
             <%= render partial: "account/trades/trade", collection: entries, as: :entry %>
           <% end %>
         </div>

app/views/account/transactions/_transaction.html.erb

@@ -1,19 +1,18 @@
 <%# locals: (entry:, selectable: true, balance_trend: nil) %>
-<% transaction, account = entry.account_transaction, entry.account %>
 
 <div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4 <%= @focused_record == entry ? "border border-gray-900 rounded-lg" : "" %>">
   <div class="pr-10 flex items-center gap-4 <%= balance_trend ? "col-span-6" : "col-span-8" %>">
     <% if selectable %>
       <%= check_box_tag dom_id(entry, "selection"),
-                        disabled: entry.account_transaction.transfer?,
+                        disabled: entry.entryable.transfer?,
                         class: "maybe-checkbox maybe-checkbox--light",
                         data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
     <% end %>
 
     <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", loading: "lazy" %>
+        <% if entry.entryable.merchant&.icon_url %>
+          <%= image_tag entry.entryable.merchant.icon_url, class: "w-6 h-6 rounded-full", loading: "lazy" %>
         <% else %>
           <%= render "shared/circle_logo", name: entry.display_name, size: "sm" %>
         <% end %>
@@ -24,8 +23,8 @@
               <% if entry.new_record? %>
                 <%= content_tag :p, entry.display_name %>
               <% else %>
-                <%= link_to entry.account_transaction.transfer? ? entry.account_transaction.transfer.name : entry.display_name,
-                        entry.account_transaction.transfer? ? transfer_path(entry.account_transaction.transfer) : account_entry_path(entry),
+                <%= link_to entry.entryable.transfer? ? entry.entryable.transfer.name : entry.display_name,
+                        entry.entryable.transfer? ? transfer_path(entry.entryable.transfer) : account_entry_path(entry),
                         data: { turbo_frame: "drawer", turbo_prefetch: false },
                         class: "hover:underline hover:text-gray-800" %>
               <% end %>
@@ -36,14 +35,14 @@
                 </span>
               <% end %>
 
-              <% if entry.account_transaction.transfer? %>
+              <% if entry.entryable.transfer? %>
                 <%= render "account/transactions/transfer_match", entry: entry %>
               <% end %>
             </div>
 
             <div class="text-gray-500 text-xs font-normal">
-              <% if entry.account_transaction.transfer? %>
-                <%= render "transfers/account_links", transfer: entry.account_transaction.transfer, is_inflow: entry.account_transaction.transfer_as_inflow.present? %>
+              <% if entry.entryable.transfer? %>
+                <%= render "transfers/account_links", transfer: entry.entryable.transfer, is_inflow: entry.entryable.transfer_as_inflow.present? %>
               <% else %>
                 <%= link_to entry.account.name, account_path(entry.account, tab: "transactions", focused_record_id: entry.id), data: { turbo_frame: "_top" }, class: "hover:underline" %>
               <% end %>

app/views/account/transactions/index.html.erb

@@ -19,7 +19,7 @@
         <p class="text-gray-500 py-4"><%= t(".no_transactions") %></p>
       <% else %>
         <div class="space-y-6">
-          <%= entries_by_date(@entries) do |entries| %>
+          <%= entries_by_date(@entries) do |entries, _transfers| %>
             <%= render entries %>
           <% end %>
         </div>

app/views/accounts/show/_activity.html.erb

@@ -77,7 +77,7 @@
           <div class="rounded-tl-lg rounded-tr-lg bg-white border-alpha-black-25 shadow-xs">
             <div class="space-y-4">
               <% calculator = Account::BalanceTrendCalculator.for(@entries) %>
-              <%= entries_by_date(@entries) do |entries| %>
+              <%= entries_by_date(@entries) do |entries, _transfers| %>
                 <% entries.each do |entry| %>
                   <%= render entry, balance_trend: calculator&.trend_for(entry) %>
                 <% end %>

app/views/layouts/_sidebar.html.erb

@@ -5,13 +5,13 @@
   <div id="user-menu" data-controller="menu">
     <button data-menu-target="button">
       <div class="w-9 h-9">
-        <%= render "settings/user_avatar", user: Current.user %>
+        <%= render "settings/user_avatar", user: Current.user, variant: :small %>
       </div>
     </button>
     <div data-menu-target="content" class="hidden absolute w-[240px] z-10 left-[255px] top-[72px] bg-white rounded-sm shadow-xs border border-alpha-black-25">
       <div class="p-3 flex items-center gap-3">
         <div class="w-9 h-9 shrink-0">
-          <%= render "settings/user_avatar", user: Current.user %>
+          <%= render "settings/user_avatar", user: Current.user, variant: :small, lazy: true %>
         </div>
 
         <div class="overflow-hidden text-ellipsis">

app/views/pages/dashboard.html.erb

@@ -190,7 +190,7 @@
           </div>
         <% else %>
           <div class="text-gray-500 p-1 space-y-1 bg-gray-25 rounded-xl">
-            <%= entries_by_date(@transaction_entries, selectable: false) do |entries| %>
+            <%= entries_by_date(@transaction_entries, selectable: false) do |entries, _transfers| %>
               <%= render entries, selectable: false %>
             <% end %>
 

app/views/settings/_user_avatar.html.erb

@@ -1,7 +1,7 @@
-<%# locals: (user:) %>
+<%# locals: (user:, variant: :thumbnail, lazy: false) %>
 
 <% if user.profile_image.attached? %>
-  <%= image_tag user.profile_image.variant(:thumbnail), class: "rounded-full w-full h-full object-cover" %>
+  <%= image_tag user.profile_image.variant(variant), class: "rounded-full w-full h-full object-cover", loading: lazy ? "lazy" : "eager" %>
 <% else %>
   <div class="text-white w-full h-full bg-gray-400 rounded-full flex items-center justify-center text-lg uppercase"><%= user.initial %></div>
 <% end %>

app/views/transactions/_summary.html.erb

@@ -2,18 +2,18 @@
 <div class="grid grid-cols-3 bg-white rounded-xl border border-alpha-black-25 shadow-xs divide-x divide-alpha-black-100">
   <div class="p-4 space-y-2">
     <p class="text-sm text-gray-500">Total transactions</p>
-    <p class="text-gray-900 font-medium text-xl" id="total-transactions"><%= totals[:count] %></p>
+    <p class="text-gray-900 font-medium text-xl" id="total-transactions"><%= totals.count %></p>
   </div>
   <div class="p-4 space-y-2">
     <p class="text-sm text-gray-500">Income</p>
     <p class="text-gray-900 font-medium text-xl" id="total-income">
-      <%= format_money totals[:income] %>
+      <%= format_money Money.new(totals.income_total, totals.currency) %>
     </p>
   </div>
   <div class="p-4 space-y-2">
     <p class="text-sm text-gray-500">Expenses</p>
     <p class="text-gray-900 font-medium text-xl" id="total-expense">
-      <%= format_money totals[:expense] %>
+      <%= format_money Money.new(totals.expense_total, totals.currency) %>
     </p>
   </div>
 </div>

app/views/transactions/index.html.erb

@@ -14,7 +14,7 @@
       <%= render "account/transactions/selection_bar" %>
     </div>
 
-    <% if @transaction_entries.present? %>
+    <% if @pagy.count > 0 %>
       <div class="grow overflow-y-auto">
         <div class="grid grid-cols-12 bg-gray-25 rounded-xl px-5 py-3 text-xs uppercase font-medium text-gray-500 items-center mb-4">
           <div class="pl-0.5 col-span-8 flex items-center gap-4">
@@ -28,13 +28,11 @@
           <p class="col-span-2 justify-self-end">amount</p>
         </div>
         <div class="space-y-6">
-          <%= entries_by_date(@transaction_entries, totals: true) do |entries| %>
-            <%# Render transfers by selecting one side of the transfer (to prevent double-rendering the same transfer across date groups) %>
-            <%= render partial: "transfers/transfer",
-                       collection: entries.select { |e| e.account_transaction.transfer? && e.account_transaction.transfer_as_outflow.present? }.map { |e| e.account_transaction.transfer_as_outflow } %>
+          <%= entries_by_date(@transaction_entries, transfers: @transfers, totals: true) do |entries, transfers| %>
+            <%= render partial: "transfers/transfer", collection: transfers %>
 
             <%# Render regular entries %>
-            <%= render partial: "account/entries/entry", collection: entries.reject { |e| e.account_transaction.transfer? } %>
+            <%= render partial: "account/entries/entry", collection: entries.reject { |e| e.entryable.transfer? } %>
           <% end %>
         </div>
       </div>

app/views/transactions/searches/filters/_badge.html.erb

@@ -41,7 +41,10 @@
     </div>
   <% end %>
 
-  <%= button_to clear_filter_transactions_path(param_key: param_key, param_value: param_value), method: :delete, data: { turbo: false }, class: "flex items-center" do %>
+  <%= button_to clear_filter_transactions_path(param_key: param_key, param_value: param_value, **request.query_parameters),
+        method: :delete,
+        data: { turbo: false },
+        class: "flex items-center" do %>
     <%= lucide_icon "x", class: "w-4 h-4 text-gray-500" %>
   <% end %>
 </li>