add queue mechanism

javascript/elements/futurism_utils.js

@@ -1,12 +1,6 @@
-/* global IntersectionObserver, CustomEvent, setTimeout */
+/* global IntersectionObserver, CustomEvent */
 
 const dispatchAppearEvent = (entry, observer = null) => {
-  if (!window.Futurism) {
-    return () => {
-      setTimeout(() => dispatchAppearEvent(entry, observer)(), 1)
-    }
-  }
-
   const target = entry.target ? entry.target : entry
 
   const evt = new CustomEvent('futurism:appear', {
@@ -17,32 +11,14 @@ const dispatchAppearEvent = (entry, observer = null) => {
     }
   })
 
-  return () => {
-    target.dispatchEvent(evt)
-  }
-}
-
-// from https://advancedweb.hu/how-to-implement-an-exponential-backoff-retry-strategy-in-javascript/#rejection-based-retrying
-const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
-
-const callWithRetry = async (fn, depth = 0) => {
-  try {
-    return await fn()
-  } catch (e) {
-    if (depth > 10) {
-      throw e
-    }
-    await wait(1.15 ** depth * 2000)
-
-    return callWithRetry(fn, depth + 1)
-  }
+  target.dispatchEvent(evt)
 }
 
 const observerCallback = (entries, observer) => {
   entries.forEach(async entry => {
     if (!entry.isIntersecting) return
 
-    await callWithRetry(dispatchAppearEvent(entry, observer))
+    dispatchAppearEvent(entry, observer)
   })
 }
 
@@ -59,6 +35,6 @@ export const extendElementWithIntersectionObserver = element => {
 export const extendElementWithEagerLoading = element => {
   if (element.dataset.eager === 'true') {
     if (element.observer) element.observer.disconnect()
-    callWithRetry(dispatchAppearEvent(element))
+    dispatchAppearEvent(element)
   }
 }

javascript/futurism_channel.js

@@ -2,6 +2,10 @@
 
 import CableReady from 'cable_ready'
 
+let subscription
+let active
+let queue = []
+
 const debounceEvents = (callback, delay = 20) => {
   let timeoutId
   let events = []
@@ -17,23 +21,15 @@ const debounceEvents = (callback, delay = 20) => {
 }
 
 export const createSubscription = consumer => {
-  consumer.subscriptions.create('Futurism::Channel', {
+  subscription = consumer.subscriptions.create('Futurism::Channel', {
     connected () {
-      window.Futurism = this
-      document.addEventListener(
-        'futurism:appear',
-        debounceEvents(events => {
-          this.send({
-            signed_params: events.map(e => e.target.dataset.signedParams),
-            sgids: events.map(e => e.target.dataset.sgid),
-            signed_controllers: events.map(
-              e => e.target.dataset.signedController
-            ),
-            urls: events.map(_ => window.location.href),
-            broadcast_each: events.map(e => e.target.dataset.broadcastEach)
-          })
-        })
-      )
+      active = true
+      queue.forEach(payload => subscription.send(payload))
+      queue = []
+    },
+
+    disconnected () {
+      active = false
     },
 
     received (data) {
@@ -52,3 +48,17 @@ export const createSubscription = consumer => {
     }
   })
 }
+
+document.addEventListener(
+  'futurism:appear',
+  debounceEvents(events => {
+    const payload = {
+      signed_params: events.map(e => e.target.dataset.signedParams),
+      sgids: events.map(e => e.target.dataset.sgid),
+      signed_controllers: events.map(e => e.target.dataset.signedController),
+      urls: events.map(_ => window.location.href),
+      broadcast_each: events.map(e => e.target.dataset.broadcastEach)
+    }
+    active ? subscription.send(payload) : queue.push(payload)
+  })
+)