GitHub – stimulusreflex/futurism: Lazy-load Rails partials …

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:

You can also omit the placeholder, which falls back to eager loading.

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 also pass in the controller that will be used to render the partial.

By default (i.e. not passing in a value), futurize will use ApplicationController, but you may override by setting the Futurism default controller in an initializer, for example config/initializers/futurism.rb.

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:

It may sound surprising to support eager loading in a lazy loading library , but there's a quite simple use case:

Suppose you have some hidden interactive portion of your page, like a tab or dropdown. You don't want its content to block the initial page load, but once that is done, you occasionally don't want to wait for the element to become visible and trigger the IntersectionObserver, you want to lazy load its contents right after it's added to the DOM.

Futurism makes that dead simple:

Futurism's default behavior is to broadcast partials as they are generated in batches:

On the client side, IntersectionObserver events are triggered in a debounced fashion, so several renders are performed on the server for each of those events. By default, futurism will group those to a single broadcast call (to save server CPU time).

For collections, however, you can opt into individual broadcasts by specifying broadcast_each: true in your helper usage:

For individual models or arbitrary collections, you can pass record and index to the placeholder block as arguments:

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 @stimulus_reflex/futurism for you !

After bundle, install the Javascript library:

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

For authentication, you can rely on ActionCable identifiers, for example, if you use Devise:

The Stimulus Reflex Docs have an excellent section about all sorts of authentication.

In Rails system tests there is a chance that flaky errors will occur due to Capybara not waiting for the placeholder elements to be replaced. To overcome this, add the flag

to an initializer, for example config/initializers/futurism.rb.

Out of the box, Rails will prefix generated urls with http://example.org rather than http://localhost, much like ActionMailer. To amend this, add

to your environments.

Below are a set of instructions that may help you get a local development environment working

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 more from the original source:
GitHub - stimulusreflex/futurism: Lazy-load Rails partials ...