Check if there's a network request already in flight

src/index.ts

@@ -50,6 +50,8 @@ export default class IncludeFragmentElement extends HTMLElement {
  return this.#getData()
  }
 
+ #busy = false
+
  attributeChangedCallback(attribute: string, oldVal: string | null): void {
  if (attribute === 'src') {
  // Source changed after attached so replace element.
@@ -132,6 +134,9 @@ export default class IncludeFragmentElement extends HTMLElement {
  )
 
  #handleData(): Promise<void> {
+ if (this.#busy) return Promise.resolve()
+ this.#busy = true
+
  this.#observer.unobserve(this)
  return this.#getData().then(
  (html: string) => {

test/test.js

@@ -587,4 +587,24 @@ suite('include-fragment-element', function () {
  assert.equal(document.querySelector('#replaced').textContent, 'hello')
  })
  })
+
+ test('include-fragment-replaced is only called once', function () {
+ const div = document.createElement('div')
+ div.hidden = true
+ document.body.append(div)
+
+ div.innerHTML = `<include-fragment src="/hello">loading</include-fragment>`
+ div.firstChild.addEventListener('include-fragment-replaced', () => (loadCount += 1))
+
+ let loadCount = 0
+ setTimeout(() => {
+ div.hidden = false
+ }, 0)
+
+ return when(div.firstChild, 'include-fragment-replaced').then(() => {
+ assert.equal(loadCount, 1, 'Load occured too many times')
+ assert.equal(document.querySelector('include-fragment'), null)
+ assert.equal(document.querySelector('#replaced').textContent, 'hello')
+ })
+ })
 })