0.0
No commit activity in last 3 years
No release in over 3 years
Render sections of the page asynchronously after initial page load.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 1.17
>= 0

Runtime

>= 0
 Project Readme

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

Lines of Code Maintainability

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"
  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

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