Improve dialog swapping

Author: mdo

js/src/dialog.js

@@ -27,6 +27,8 @@ const EVENT_CANCEL = `cancel${EVENT_KEY}`
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_NONMODAL = 'dialog-nonmodal'
+const CLASS_NAME_INSTANT = 'dialog-instant'
+const CLASS_NAME_SWAP_IN = 'dialog-swap-in'
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dialog"]'
 
@@ -130,11 +132,37 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   const shouldSwap = currentDialog && currentDialog !== target
 
   if (shouldSwap) {
+    // Swap strategy (seamless backdrop, no flash):
+    //   1. Mark the incoming dialog with .dialog-swap-in so its ::backdrop
+    //      skips the @starting-style fade-in and appears fully opaque on
+    //      its very first frame in the top layer.
+    //   2. Open the incoming dialog (showModal).
+    //   3. Close the outgoing dialog synchronously — no exit transition, no
+    //      .hiding — so its ::backdrop is removed in the same frame the
+    //      incoming dialog's backdrop appears. Since both backdrops render
+    //      the same color, the user sees one continuous backdrop. Two
+    //      simultaneously-visible backdrops would composite to ~75% darker,
+    //      and a fading-out + fading-in pair would dip to ~75% opacity —
+    //      either would look like a flash.
+    //   4. Clean up the .dialog-swap-in flag once the incoming dialog
+    //      finishes its entry transition.
     const newDialog = Dialog.getOrCreateInstance(target, config)
+    target.classList.add(CLASS_NAME_SWAP_IN)
     newDialog.show(this)
+    EventHandler.one(target, `shown${EVENT_KEY}`, () => {
+      target.classList.remove(CLASS_NAME_SWAP_IN)
+    })
 
     const currentInstance = Dialog.getInstance(currentDialog)
     if (currentInstance) {
+      // Force synchronous close: .dialog-instant makes _isAnimated() false,
+      // which makes _shouldDeferClose() false, so hide() calls close()
+      // immediately (no deferred .hiding path). The class is removed after
+      // the (now-synchronous) hidden event fires.
+      currentDialog.classList.add(CLASS_NAME_INSTANT)
+      EventHandler.one(currentDialog, EVENT_HIDDEN, () => {
+        currentDialog.classList.remove(CLASS_NAME_INSTANT)
+      })
       currentInstance.hide()
     }
 

scss/_dialog.scss

@@ -240,6 +240,16 @@ $dialog-sizes: defaults(
       background-color: transparent;
       backdrop-filter: blur(0);
     }
+
+    // Swap entry: when this dialog is opened as the target of a swap, the
+    // outgoing dialog's ::backdrop is being removed synchronously in the same
+    // JS tick. To avoid any flicker (either a dip from a fade-in over nothing,
+    // or double-darkening from two stacked backdrops), start this backdrop
+    // already-opaque so it takes over from the outgoing one seamlessly.
+    .dialog.dialog-swap-in:not(.dialog-instant)::backdrop {
+      background-color: var(--dialog-backdrop-bg);
+      backdrop-filter: blur(var(--dialog-backdrop-blur));
+    }
   }
 
   // Dialog sizes