From 16d3baff5daeaa7419d6f261fde1c452640467b3 Mon Sep 17 00:00:00 2001
From: Eli Bosley <eli@bosley.dev>
Date: Sat, 11 Jul 2026 23:20:41 -0400
Subject: [PATCH] fix(ui): smooth notification drawer slide-in/out

The Sheet primitive animated with a blanket 'transition ease-in-out' running
alongside the reka enter/exit keyframes, so every property (box-shadow, filter,
transform) transitioned each frame and the panel was never promoted to its own
compositor layer. Opening the notification drawer then mounted the full tab/list
body synchronously, stalling the slide's first frames.

- sheet.variants.ts: drop the blanket transition; animate only via the
  transform/opacity keyframes; add will-change-transform so the slide runs on the
  compositor; snappier, symmetric timing (300ms open / 200ms close, ease-out/in).
- SheetContent.vue: match the overlay fade duration to the panel.
- Notifications/Sidebar.vue: defer mounting the tab/list body until a couple
  frames after open so the panel's first paint is cheap and the slide starts
  immediately; the body stays mounted through the exit slide.

Benefits every Sheet/ResponsiveModal, not just notifications.
---
 .../components/common/sheet/SheetContent.vue  |  2 +-
 .../components/common/sheet/sheet.variants.ts |  7 +++++-
 web/src/components/Notifications/Sidebar.vue  | 25 +++++++++++++++++--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/unraid-ui/src/components/common/sheet/SheetContent.vue b/unraid-ui/src/components/common/sheet/SheetContent.vue
index f797bbe47d..4703293bc5 100644
--- a/unraid-ui/src/components/common/sheet/SheetContent.vue
+++ b/unraid-ui/src/components/common/sheet/SheetContent.vue
@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
   <DialogPortal :disabled="disabled" :force-mount="forceMount" :to="teleportTarget">
     <DialogOverlay
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60"
+      class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/60 data-[state=closed]:duration-200 data-[state=open]:duration-300"
     />
     <DialogContent :class="sheetClass" v-bind="forwarded">
       <slot />
diff --git a/unraid-ui/src/components/common/sheet/sheet.variants.ts b/unraid-ui/src/components/common/sheet/sheet.variants.ts
index 4a2865c1e6..43ee4620ee 100644
--- a/unraid-ui/src/components/common/sheet/sheet.variants.ts
+++ b/unraid-ui/src/components/common/sheet/sheet.variants.ts
@@ -2,7 +2,12 @@ import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 
 export const sheetVariants = cva(
-  'fixed z-50 bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
+  // Animate ONLY via the transform/opacity keyframes (animate-in/out). The panel is
+  // promoted to its own compositor layer (will-change-transform) so the slide runs
+  // off the main thread and is not stalled by the panel's contents mounting. We do
+  // NOT add a blanket `transition` here: it would transition every property
+  // (box-shadow, filter, …) alongside the keyframe and cause per-frame repaints.
+  'fixed z-50 bg-background gap-4 shadow-lg border-border will-change-transform data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=open]:ease-out data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=closed]:ease-in',
   {
     variants: {
       side: {
diff --git a/web/src/components/Notifications/Sidebar.vue b/web/src/components/Notifications/Sidebar.vue
index 19c72bcecd..0a64e9f732 100644
--- a/web/src/components/Notifications/Sidebar.vue
+++ b/web/src/components/Notifications/Sidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMutation, useQuery, useSubscription } from '@vue/apollo-composable';
 
@@ -139,10 +139,30 @@ const readArchivedCount = computed(() => {
 const prepareToViewNotifications = () => {
   void recalculateOverview();
 };
+
+// Defer mounting the (heavy) tab/list body until the panel has started its open
+// animation. The slide is a compositor transform, but the panel's FIRST paint must
+// finish before it can show — keeping that first paint cheap (header only) lets the
+// slide start immediately instead of hitching while the notification lists mount.
+const open = ref(false);
+const bodyMounted = ref(false);
+watch(open, (isOpen) => {
+  if (isOpen) {
+    bodyMounted.value = false;
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => {
+        if (open.value) bodyMounted.value = true;
+      })
+    );
+  }
+  // On close, keep the body mounted so it stays visible during the exit slide; reka
+  // unmounts the whole SheetContent (and the body with it) once the exit animation
+  // finishes.
+});
 </script>
 
 <template>
-  <Sheet>
+  <Sheet v-model:open="open">
     <SheetTrigger as-child>
       <Button variant="header" size="header" @click="prepareToViewNotifications">
         <span class="sr-only">{{ t('notifications.sidebar.openButtonSr') }}</span>
@@ -158,6 +178,7 @@ const prepareToViewNotifications = () => {
           <SheetTitle class="text-2xl">{{ t('notifications.sidebar.title') }}</SheetTitle>
         </SheetHeader>
         <Tabs
+          v-if="bodyMounted"
           default-value="unread"
           class="flex min-h-0 flex-1 flex-col"
           :aria-label="t('notifications.sidebar.statusTabsAria')"