fix(loading-states): prevent triggering loading-states on preloaded requests

src/loading-states/loading-states.js

@@ -61,7 +61,8 @@
 
   htmx.defineExtension('loading-states', {
     onEvent: function(name, evt) {
-      if (name === 'htmx:beforeRequest') {
+      if (name === 'htmx:beforeRequest'
+          && evt.detail.requestConfig.headers["HX-Preloaded"] !== "true") {
         const container = loadingStateContainer(evt.target)
 
         const loadingStateTypes = [

src/loading-states/test/ext/loading-states.js

@@ -164,4 +164,24 @@ describe('loading states extension', function() {
     var el = byId('d2')
     el.disabled.should.be.false
   })
+
+  it('loading state should not trigger for preloaded request', function() {
+    this.server.respondWith('GET', '/test', 'Loaded!')
+    var container = make('<div hx-ext="loading-states,preload"><button hx-get="/test" preload="mouseover">Hover Me!</button><div data-loading style="display: none;">Loading...</div></div>')
+    var btn = container.querySelector('button')
+    var loader = container.querySelector('[data-loading]')
+
+    loader.style.display.should.equal('none')
+
+    htmx.trigger(btn, 'mouseover')
+    this.clock.tick(100)
+
+    loader.style.display.should.equal('none')
+
+    this.server.respond()
+
+    loader.style.display.should.equal('none')
+  })
 })
+
+

src/loading-states/test/index.html

@@ -53,6 +53,7 @@ <h2>Mocha Test Suite</h2>
 
 <script src="./util.js"></script>
 
+<script src="../../preload/preload.js"></script>
 <script src="../loading-states.js"></script>
 <script src="ext/loading-states.js"></script>