From ae14912cbe70841656fcd98a3dc2f5fe771539db Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 22 Jul 2025 22:33:19 -0500
Subject: [PATCH] Add an animated effect for the generating state

---
 app/assets/stylesheets/_global.css            |  5 +++++
 app/assets/stylesheets/animation.css          |  6 ++++++
 app/assets/stylesheets/events.css             | 19 +++++++++++++++++--
 .../events/day_timeline/_summary.html.erb     | 18 ++++++++----------
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 1431f23e8..67820e6ab 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -200,6 +200,11 @@
   --color-code-token__selector: oklch(var(--lch-green-dark));
   --color-code-token__variable: oklch(var(--lch-red-dark));
 
+  /* Colors: Generating gradient */
+  --color-gradient-1: oklch(var(--lch-violet-lighter));
+  --color-gradient-2: oklch(var(--lch-pink-lighter));
+  --color-gradient-3: oklch(var(--lch-purple-lighter));
+  --color-gradient-4: oklch(var(--lch-blue-lighter));
 
   @media (prefers-color-scheme: dark) {
     --lch-canvas: 20% 0.0195 232.58;
diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index c99db248a..36e682d23 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -8,6 +8,12 @@
     5%,60%  { opacity: 1; }
   }
 
+  @keyframes gradient {
+    0%   { background-position: 0% 50%; }
+    50%  { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
   @keyframes pulse {
     0%   { opacity: 1; }
     50%  { opacity: 0.6; }
diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 430a9b50a..1d3544786 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -18,7 +18,17 @@
     margin-inline: auto;
     max-inline-size: 80ch;
     padding: 1.3lh 1lh 1lh;
-    transition: all 300ms ease;
+    position: relative;
+    text-align: start;
+
+    &:has(.events__activity--generating) {
+      --border-color: var(--color-selected-dark);
+
+      animation: gradient 4s ease infinite;
+      background: linear-gradient(-45deg, var(--color-gradient-1), var(--color-gradient-2), var(--color-gradient-3), var(--color-gradient-4));
+      background-size: 300%;
+      text-align: center;
+    }
 
     a {
       font-weight: 500;
@@ -32,7 +42,12 @@
       }
     }
 
-    + .btn {
+    span {
+      font-weight: 500;
+      opacity: 0.5;
+    }
+
+    .btn {
       --btn-background: var(--color-selected-light);
       --btn-border-color: var(--color-selected-dark);
 
diff --git a/app/views/events/day_timeline/_summary.html.erb b/app/views/events/day_timeline/_summary.html.erb
index 5384457ba..4a9db8479 100644
--- a/app/views/events/day_timeline/_summary.html.erb
+++ b/app/views/events/day_timeline/_summary.html.erb
@@ -1,19 +1,17 @@
 <div class="events__activity-summary margin-block txt-small border border-radius">
   <% if day_timeline.summarized? %>
-    <div class="position-relative">
-      <%= render "events/day_timeline/activity_summary", summary: day_timeline.summary %>
+    <%= render "events/day_timeline/activity_summary", summary: day_timeline.summary %>
 
-      <% if Current.user.staff? %>
-        <%= link_to admin_prompt_sandbox_path(day: day_timeline.day), class: "btn txt-xx-small" do %>
-          <%= icon_tag "bolt" %>
-          <span class="for-screen-reader">Prompt sandbox</span>
-        <% end %>
+    <% if Current.user.staff? %>
+      <%= link_to admin_prompt_sandbox_path(day: day_timeline.day), class: "btn txt-xx-small" do %>
+        <%= icon_tag "bolt" %>
+        <span class="for-screen-reader">Prompt sandbox</span>
       <% end %>
-    </div>
+    <% end %>
   <% else %>
-    <div id="<%= day_timeline.summary_key %>">
+    <div class="events__activity--generating" id="<%= day_timeline.summary_key %>">
       <%= auto_submit_form_with url: events_activity_summaries_path(day: day_timeline.day, **day_timeline.filter.as_params), method: :post %>
-      Generating summary...
+      <span>Writing summary…</span>
     </div>
   <% end %>
 </div>