Table of Contents

• RenderLater
  • Improve user perceived performance of your Rails app
• Quick Start
  • Gemfile
  • app/assets/javascripts/application.js
  • app/views/any_erb_template.html.erb
• How it Works
  • JavaScript Development

RenderLater

Improve user perceived performance of your Rails app

Render sections of the page asynchronously after initial page load.

Quick Start

1. Gemfile

gem "render_later"

1. app/assets/javascripts/application.js

//= require render_later

1. app/views/any_erb_template.html.erb

<%= render_later "/some/slow/url" %>

Next Steps

Style the placeholder element

You may wish to style the placeholder. This can be done by passing css and style arguments to render_later

<%= render_later "/some/slow/url", css: "css-class", style: "color:red" %>

Add loading content

The text content Loading... displays by default. This can be overridden by passing a block to render_later

<%= render_later "/some/slow/url" do %>
  <%= image_tag "spinner.gif" %>
<% end %>

Change the Placeholder Tag

A span placeholder tag is used by default. This can be overridden by passing the tag argument to render_later

<%= render_later "/some/slow/url", tag: "tr" %>

How it Works

1. Site visitor requests a page
2. Server renders a response
3. Browser renders the page
4. XHR is used to fetch render_later sections asynchronously
5. The DOM is updated with the asyncrhonously loaded HTML

Similar Tools

• https://github.com/renderedtext/render_async
• https://github.com/jarthod/render-later

JavaScript Development

The JavaScript source is located in app/assets/javascripts/src & transpiles to app/assets/javascripts/render_later.js via Webpack.

# build the javascript
./bin/yarn
./bin/webpack