Table of Contents

• RenderLater
  • Improve user perceived performance of your Rails app
  • Quick Start
  • Next Steps
    • Style the placeholder element
    • Add loading content
    • Change the placeholder tag
  • How it Works
  • Similar Tools
  • JavaScript Development

RenderLater

Improve user perceived performance of your Rails app

Render slower sections of web pages asynchronously after initial load.

Quick Start

1. Gemfile

gem "render_later"

2. app/assets/javascripts/application.js

//= require render_later

3. 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