From 2eb6c9dd93e8a63b91c15fbdbdb561e2f8387db0 Mon Sep 17 00:00:00 2001 From: perennial Date: Sat, 19 Oct 2024 02:29:53 +1100 Subject: [PATCH] minimise settle time --- assets/css/bootstrap-style.scss | 3 +++ assets/views/layout/default.jet.html | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss index b906c35..e68c10e 100644 --- a/assets/css/bootstrap-style.scss +++ b/assets/css/bootstrap-style.scss @@ -505,6 +505,7 @@ body { &:has(.htmx-request) { opacity: 0.25; + /// based on how long it takes to get a response from the server transition: opacity 500ms ease-out; } @@ -515,6 +516,8 @@ body { &.htmx-settling { opacity: 0; + /// the duration here doesn't really matter + /// this is just so that htmx animates the change transition: opacity 0ms; } } diff --git a/assets/views/layout/default.jet.html b/assets/views/layout/default.jet.html index 5edf6ca..336ef65 100644 --- a/assets/views/layout/default.jet.html +++ b/assets/views/layout/default.jet.html @@ -66,11 +66,11 @@ {* NOTE: hx-swap="show:window:top" isn't needed when we hx-boost the body *} - {* NOTE: we need to specify swap and settle in hx-swap otherwise htmx won't apply the classes; durations set low for minimal impact *} + {* NOTE: we need to specify settle in hx-swap otherwise htmx won't apply the classes; duration set low for minimal impact *}