stimulus-reflex-lazy-loader

lazy_load_controller.js

import ApplicationController from './application_controller'
import StimulusReflex from "stimulus_reflex";

export default class extends ApplicationController {
  connect(){
    StimulusReflex.register(this)
    if (!this.element.id) {
      this.element.id = this.randomId()
    }
    this.loadReflex()
  }

  loadReflex(){
    if (this.isActionCableConnectionOpen()) {
      this.stimulate(this.data.get('reflex'), this.element)
    } else {
      setTimeout(function () {
        this.loadReflex()
      }.bind(this), 10);
    }
  }

  randomId() {
    return Math.random().toString(32).replace(/[^a-z]+/g, '').substr(2, 10);
  }
}

show.html

<div class="div" data-controller="lazy-load" data-lazy-load-reflex="ExampleReflex#test">
  Placeholder
</div>

It's been a while and I don't actually use this, but it used to work…

I don't have time right now to look into it. But I would recommend to use https://github.com/julianrubisch/futurism/ this is actually being worked on and will be more solid.