From 926008818ee06d259f4b711d46ed00c845f8bf6c Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 24 Apr 2025 17:18:22 +0600
Subject: [PATCH] web/DialogHolder: improve first animation performance,
 prevent lag

sometimes the initial dialog animation lags, and as i've discovered it's mostly caused by animating box-shadow (even though it's not directly animated). replacing it with filter seems to have improved the performance a LOT lol.

also:
- made the in animation jumpier
- delayed the animation of modal a bit to let the background start appearing first
- extended opacity fade in by 5%
---
 web/src/components/dialog/DialogHolder.svelte | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/components/dialog/DialogHolder.svelte b/web/src/components/dialog/DialogHolder.svelte
index 92e4253b..b519340d 100644
--- a/web/src/components/dialog/DialogHolder.svelte
+++ b/web/src/components/dialog/DialogHolder.svelte
@@ -85,6 +85,8 @@
         -webkit-backdrop-filter: blur(7px);
 
         opacity: 0;
+
+        will-change: opacity;
         transition: opacity 0.2s;
     }
 
@@ -105,19 +107,21 @@
         align-items: center;
 
         background: var(--popup-bg);
-        box-shadow:
-            0 0 0 2px var(--popup-stroke) inset,
-            0 0 60px 10px var(--popup-bg);
+        box-shadow: 0 0 0 2px var(--popup-stroke) inset;
         border-radius: 29px;
 
+        filter: drop-shadow(0 0 40px var(--button));
+
         padding: var(--dialog-padding);
 
         position: relative;
-        will-change: transform;
+        will-change: transform, opacity, filter;
     }
 
     :global(dialog.open .dialog-body) {
         animation: modal-in 0.35s;
+        animation-delay: 0.06s;
+        animation-fill-mode: backwards;
     }
 
     :global(dialog.closing .dialog-body) {
@@ -151,11 +155,11 @@
             transform: scale(0.8);
             opacity: 0;
         }
-        30% {
+        35% {
             opacity: 1;
         }
         50% {
-            transform: scale(1.005);
+            transform: scale(1.01);
         }
         100% {
             transform: scale(1);
@@ -181,7 +185,7 @@
         1% {
             transform: translateY(200px);
         }
-        30% {
+        35% {
             opacity: 1;
         }
         50% {