Replace sync spinners with pulse animation (#2413)

* Replace sync spinners with pulse animation

* Remove dev code

app/components/disclosure_component.html.erb

@@ -2,20 +2,22 @@
   <%= tag.summary class: class_names(
     "px-3 py-2 rounded-xl cursor-pointer flex items-center justify-between bg-surface"
   ) do %>
-    <div class="flex items-center gap-3">
+    <% if summary_content? %>
-      <% if align == :left %>
-        <%= helpers.icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
-      <% end %>
-
-      <%= tag.span class: class_names("font-medium", align == :left ? "text-sm text-primary" : "text-xs uppercase text-secondary") do %>
-        <%= title %>
-      <% end %>
-    </div>
-
-    <% if align == :right %>
-      <%= helpers.icon "chevron-down", class: "group-open:transform group-open:rotate-180" %>
-    <% elsif summary_content? %>
       <%= summary_content %>
+    <% else %>
+      <div class="flex items-center gap-3">
+        <% if align == :left %>
+          <%= helpers.icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
+        <% end %>
+
+        <%= tag.span class: class_names("font-medium", align == :left ? "text-sm text-primary" : "text-xs uppercase text-secondary") do %>
+          <%= title %>
+        <% end %>
+      </div>
+
+      <% if align == :right %>
+        <%= helpers.icon "chevron-down", class: "group-open:transform group-open:rotate-180" %>
+      <% end %>
     <% end %>
   <% end %>
 

app/components/disclosure_component.rb

@@ -3,7 +3,7 @@ class DisclosureComponent < ViewComponent::Base
 
   attr_reader :title, :align, :open, :opts
 
-  def initialize(title:, align: "right", open: false, **opts)
+  def initialize(title: nil, align: "right", open: false, **opts)
     @title = title
     @align = align.to_sym
     @open = open

app/views/accounts/_accountable_group.html.erb

@@ -2,13 +2,14 @@
 
 <div id="<%= account_group.dom_id(tab: all_tab ? :all : nil, mobile: mobile) %>">
   <% is_open = open.nil? ? account_group.accounts.any? { |account| page_active?(account_path(account)) } : open %>
-  <%= render DisclosureComponent.new(title: account_group.name, align: :left, open: is_open) do |disclosure| %>
+  <%= render DisclosureComponent.new(align: :left, open: is_open) do |disclosure| %>
     <% disclosure.with_summary_content do %>
-      <% if account_group.syncing? %>
+      <div class="flex items-center gap-3">
-        <div class="ml-2 group-open:hidden">
+        <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
-          <%= render partial: "shared/sync_indicator", locals: { size: "xs" } %>
+        <%= tag.span class: class_names("text-sm text-primary font-medium", "animate-pulse" => account_group.syncing?) do %>
-        </div>
+          <%= account_group.name %>
-      <% end %>
+        <% end %>
+      </div>
 
       <div class="ml-auto text-right grow">
         <%= tag.p format_money(account_group.total_money), class: "text-sm font-medium text-primary" %>
@@ -32,10 +33,7 @@
 
           <div class="min-w-0 grow">
             <div class="flex items-center gap-2 mb-0.5">
-              <%= tag.p account.name, class: "text-sm text-primary font-medium truncate" %>
+              <%= tag.p account.name, class: class_names("text-sm text-primary font-medium truncate", "animate-pulse" => account.syncing?) %>
-              <% if account.syncing? %>
-                <%= render partial: "shared/sync_indicator", locals: { size: "xs" } %>
-              <% end %>
             </div>
             <%= tag.p account.short_subtype_label, class: "text-sm text-secondary truncate" %>
           </div>

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

@@ -12,15 +12,11 @@
 
         <div class="flex items-center gap-2">
           <div class="truncate">
-            <h2 class="font-medium text-xl truncate"><%= title || account.name %></h2>
+            <h2 class="font-medium text-xl truncate <%= "animate-pulse" if account.syncing? %>"><%= title || account.name %></h2>
             <% if subtitle.present? %>
               <p class="text-sm text-secondary"><%= subtitle %></p>
             <% end %>
           </div>
-
-          <% if account.syncing? %>
-            <%= render partial: "shared/sync_indicator", locals: { size: "sm" } %>
-          <% end %>
         </div>
       </div>
     <% end %>

app/views/pages/dashboard/_balance_sheet.html.erb

@@ -5,7 +5,7 @@
     <div class="bg-container shadow-border-xs rounded-xl space-y-4 p-4">
       <div class="flex items-center gap-2">
         <h2 class="text-lg font-medium inline-flex items-center gap-1.5">
-          <span>
+          <span class="<%= "animate-pulse" if classification_group.syncing? %>">
             <%= classification_group.name %>
           </span>
 
@@ -14,10 +14,6 @@
             <span class="text-secondary font-medium text-lg"><%= classification_group.total_money.format(precision: 0) %></span>
           <% end %>
         </h2>
-
-        <% if classification_group.syncing? %>
-          <%= render partial: "shared/sync_indicator", locals: { size: "sm" } %>
-        <% end %>
       </div>
 
       <% if classification_group.account_groups.any? %>

app/views/pages/dashboard/_net_worth_chart.html.erb

@@ -7,13 +7,9 @@
       <div class="space-y-2">
         <div class="flex items-center gap-2">
           <p class="text-sm text-secondary font-medium"><%= t(".title") %></p>
-
-          <% if balance_sheet.syncing? %>
-            <%= render partial: "shared/sync_indicator", locals: { size: "sm" } %>
-          <% end %>
         </div>
 
-        <p class="text-primary -space-x-0.5 text-3xl font-medium">
+        <p class="text-primary -space-x-0.5 text-3xl font-medium <%= "animate-pulse" if balance_sheet.syncing? %>">
           <%= series.trend.current.format %>
         </p>
 

app/views/shared/_sync_indicator.html.erb

@@ -1,5 +0,0 @@
-<%# locals: (size: "md") %>
-
-<div class="animate-spin text-gray-500">
-  <%= icon "loader-circle", color: "current", size: size %>
-</div>