fix(swap): apply swap delay in swap function instead of handleAjaxResponse (#2845)

* fix(swap): apply swap delay in swap function instead of handleAjaxResponse

* add swap delay test

Author: byteshinobi

src/htmx.js

@@ -1850,6 +1850,30 @@ var htmx = (function() {
     return oobElts.length > 0
   }
 
+  /**
+   * Apply swapping class and then execute the swap with optional delay
+   * @param {string|Element} target
+   * @param {string} content
+   * @param {HtmxSwapSpecification} swapSpec
+   * @param {SwapOptions} [swapOptions]
+   */
+  function swap(target, content, swapSpec, swapOptions) {
+    if (!swapOptions) {
+      swapOptions = {}
+    }
+
+    target = resolveTarget(target)
+    target.classList.add(htmx.config.swappingClass)
+    const localSwap = function() {
+      runSwap(target, content, swapSpec, swapOptions)
+    }
+    if (swapSpec?.swapDelay && swapSpec.swapDelay > 0) {
+      getWindow().setTimeout(localSwap, swapSpec.swapDelay)
+    } else {
+      localSwap()
+    }
+  }
+
   /**
    * Implements complete swapping pipeline, including: focus and selection preservation,
    * title updates, scroll, OOB swapping, normal swapping and settling
@@ -1858,7 +1882,7 @@ var htmx = (function() {
    * @param {HtmxSwapSpecification} swapSpec
    * @param {SwapOptions} [swapOptions]
    */
-  function swap(target, content, swapSpec, swapOptions) {
+  function runSwap(target, content, swapSpec, swapOptions) {
     if (!swapOptions) {
       swapOptions = {}
     }
@@ -4790,8 +4814,6 @@ var htmx = (function() {
         swapSpec.ignoreTitle = ignoreTitle
       }
 
-      target.classList.add(htmx.config.swappingClass)
-
       // optional transition API promise callbacks
       let settleResolve = null
       let settleReject = null
@@ -4878,12 +4900,7 @@ var htmx = (function() {
           })
         }
       }
-
-      if (swapSpec.swapDelay > 0) {
-        getWindow().setTimeout(doSwap, swapSpec.swapDelay)
-      } else {
-        doSwap()
-      }
+      doSwap()
     }
     if (isError) {
       triggerErrorEvent(elt, 'htmx:responseError', mergeObjects({ error: 'Response Status Error Code ' + xhr.status + ' from ' + responseInfo.pathInfo.requestPath }, responseInfo))

test/core/api.js

@@ -483,6 +483,17 @@ describe('Core htmx API test', function() {
     output.innerHTML.should.be.equal('<div>Swapped!</div>')
   })
 
+  it('swap works with a swap delay', function(done) {
+    var div = make("<div hx-get='/test'></div>")
+    div.innerText.should.equal('')
+    htmx.swap(div, 'jsswapped', { swapDelay: 10 })
+    div.innerText.should.equal('')
+    setTimeout(function() {
+      div.innerText.should.equal('jsswapped')
+      done()
+    }, 30)
+  })
+
   it('swaps content properly (with select)', function() {
     var output = make('<output id="output"/>')
     htmx.swap('#output', '<div><p id="select-me">Swapped!</p></div>', { swapStyle: 'innerHTML' }, { select: '#select-me' })