{"id":15288803,"url":"https://github.com/hopsoft/render_later","last_synced_at":"2026-03-06T01:32:42.006Z","repository":{"id":56891790,"uuid":"175698643","full_name":"hopsoft/render_later","owner":"hopsoft","description":"Improve the user perceived performance of your Rails app","archived":false,"fork":false,"pushed_at":"2019-03-14T23:44:45.000Z","size":64,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-01T23:54:38.142Z","etag":null,"topics":["performance","rails","rails-engine","ruby-gem","ruby-on-rails","stimulus","xhr"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hopsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-14T20:59:25.000Z","updated_at":"2023-09-04T17:34:40.000Z","dependencies_parsed_at":"2022-08-21T00:50:32.953Z","dependency_job_id":null,"html_url":"https://github.com/hopsoft/render_later","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hopsoft%2Frender_later","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hopsoft%2Frender_later/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hopsoft%2Frender_later/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hopsoft%2Frender_later/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hopsoft","download_url":"https://codeload.github.com/hopsoft/render_later/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681491,"owners_count":21144700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["performance","rails","rails-engine","ruby-gem","ruby-on-rails","stimulus","xhr"],"created_at":"2024-09-30T15:53:15.617Z","updated_at":"2026-03-06T01:32:41.941Z","avatar_url":"https://github.com/hopsoft.png","language":"Ruby","readme":"\u003c!-- Tocer[start]: Auto-generated, don't remove. --\u003e\n\n## Table of Contents\n\n- [RenderLater](#renderlater)\n  - [Improve user perceived performance of your Rails app](#improve-user-perceived-performance-of-your-rails-app)\n  - [Quick Start](#quick-start)\n  - [Next Steps](#next-steps)\n    - [Style the placeholder element](#style-the-placeholder-element)\n    - [Add loading content](#add-loading-content)\n    - [Change the placeholder tag](#change-the-placeholder-tag)\n  - [How it Works](#how-it-works)\n  - [Similar Tools](#similar-tools)\n  - [JavaScript Development](#javascript-development)\n\n\u003c!-- Tocer[finish]: Auto-generated, don't remove. --\u003e\n\n[![Lines of Code](http://img.shields.io/badge/lines_of_code-27-brightgreen.svg?style=flat)](http://blog.codinghorror.com/the-best-code-is-no-code-at-all/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/a0661a5ab84b7b83b5aa/maintainability)](https://codeclimate.com/github/hopsoft/render_later/maintainability)\n\n# RenderLater\n\n## Improve user perceived performance of your Rails app\n\nRender slower sections of web pages asynchronously after initial load.\n\n## Quick Start\n\n1. __Gemfile__\n\n```ruby\ngem \"render_later\"\n```\n\n2. __app/assets/javascripts/application.js__\n\n```javascript\n//= require render_later\n```\n\n3. __app/views/any_erb_template.html.erb__\n\n```erb\n\u003c%= render_later \"/some/slow/url\" %\u003e\n```\n\n## Next Steps\n\n### Style the placeholder element\n\nYou may wish to style the placeholder.\nThis can be done by passing `css` and `style` arguments to `render_later`\n\n```erb\n\u003c%= render_later \"/some/slow/url\", css: \"css-class\", style: \"color:red\" %\u003e\n```\n\n### Add loading content\n\nThe text content `Loading...` displays by default.\nThis can be overridden by passing a block to `render_later`\n\n```erb\n\u003c%= render_later \"/some/slow/url\" do %\u003e\n  \u003c%= image_tag \"spinner.gif\" %\u003e\n\u003c% end %\u003e\n```\n\n### Change the placeholder tag\n\nA `span` placeholder tag is used by default.\nThis can be overridden by passing the `tag` argument to `render_later`\n\n```erb\n\u003c%= render_later \"/some/slow/url\", tag: \"tr\" %\u003e\n```\n\n## How it Works\n\n1. Site visitor requests a page\n1. Server renders a response\n1. Browser renders the page\n1. [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is used to fetch `render_later` sections asynchronously\n1. The DOM is updated with the asyncrhonously loaded HTML\n\n## Similar Tools\n\n- https://github.com/renderedtext/render_async\n- https://github.com/jarthod/render-later\n\n## JavaScript Development\n\nThe JavaScript source is located in `app/assets/javascripts/src`\n\u0026 transpiles to `app/assets/javascripts/render_later.js` via Webpack.\n\n```sh\n# build the javascript\n./bin/yarn\n./bin/webpack\n```\n","funding_links":[],"categories":["Ruby"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhopsoft%2Frender_later","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhopsoft%2Frender_later","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhopsoft%2Frender_later/lists"}