or a

are rendered. Those custom elements have an IntersectionObserver attached that will send a signed global id to an ActionCable channel (FuturismChannel) which will then replace the placeholders with the actual resource partial.

With that method, you could lazy load every class that has to_partial_path defined (ActiveModel has by default).

You can pass the placeholder as a block:

Currently there are two ways to call futurize, designed to wrap render's behavior:

You can pass a single ActiveRecord or an ActiveRecord::Relation to futurize, just as you would call render:

Remember that you can override the partial path in you models, like so:

That way you get maximal flexibility when just specifying a single resource.

Call futurize with a partial keyword:

You can also use the shorthand syntax:

Collection rendering is also possible:

You can pass a hash of attribute/value pairs which will be mixed into the HTML markup for the placeholder element. This is important for layouts that require elements to have dimensionality. For example, many scripts calculate size based on element height and width. This option ensures that your elements have integrity, even if they are gone before you see them.

This will output the following:

Once your futurize element has been rendered, the futurize:appeared custom event will be called.

Add this line to your application's Gemfile:

And then execute:

To copy over the javascript files to your application, run

! Note that the installer will run yarn add @minthesize/futurism for you !

After bundle, install the Javascript library:

In your app/javascript/channels/index.js, add the following

The gem is available as open source under the terms of the MIT License.

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Read the original post:

GitHub - julianrubisch/futurism: Lazy-load Rails partials ...