From 7f387cfa302990ca991e186089c930047c6525eb Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Wed, 3 Sep 2025 00:12:47 +0200
Subject: [PATCH] Improves header animation performance.

Refactors the header animation to animate the calendar header's height instead of just the all-day container.

This change improves the perceived performance of the animation. It also reduces animation duration.
---
 src/renderers/HeaderRenderer.ts     | 16 ++++++++++------
 wwwroot/css/calendar-layout-css.css |  1 -
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/renderers/HeaderRenderer.ts b/src/renderers/HeaderRenderer.ts
index 24e102a..34647f2 100644
--- a/src/renderers/HeaderRenderer.ts
+++ b/src/renderers/HeaderRenderer.ts
@@ -115,13 +115,17 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
     
     if (!calendarHeader || !allDayContainer) return;
     
+    // Get current parent height for animation
+    const currentParentHeight = parseFloat(getComputedStyle(calendarHeader).height);
+    const heightDifference = targetHeight - currentHeight;
+    const targetParentHeight = currentParentHeight + heightDifference;
+    
     const animations = [
-      // Container height animation
-      allDayContainer.animate([
-        { height: `${currentHeight}px`, opacity: currentHeight > 0 ? '1' : '0' },
-        { height: `${targetHeight}px`, opacity: '1' }
+      calendarHeader.animate([
+        { height: `${currentParentHeight}px` },
+        { height: `${targetParentHeight}px` }
       ], {
-        duration: 1000,
+        duration: 300,
         easing: 'ease-out',
         fill: 'forwards'
       })
@@ -137,7 +141,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
           { height: `${currentSpacerHeight}px` },
           { height: `${targetSpacerHeight}px` }
         ], {
-          duration: 1000,
+          duration: 300,
           easing: 'ease-out',
           fill: 'forwards'
         })
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index ab43acf..e2708a5 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -273,7 +273,6 @@ swp-allday-container {
   padding: 2px;
   align-items: center;
   overflow: hidden;
-  height: 0px; /* Initial height for Web Animation API */
 }
 
 /* All-day events in containers */