Loading content later

Search…
When parts of your page become slow, e.g, a metrics table that is expensive to render:
1
# /dashboard.json.props
2
json.header do
3
 ...
4
end
5
​
6
json.metrics do
7
  sleep 10 # expensive operation
8
  json.total_visitors 30
9
end
Copied!
A common approach is to load content in async fashion by building out another set of routes, controllers, tests, with more work on the frontend to manage state, call fetch, etc.
With Breezy, we can turn content async with a single setting.
1
json.metrics(defer: :auto) do
2
  sleep 10 # expensive operation
3
  json.total_visitors 30
4
end
Copied!
With defer: :auto, PropsTemplate will render order.json.props as usual, but without json.metrics, then when the content is received by the client, Breezy will automatically make an remote request for anything that was skipped:
1
remote('/dashboard?bzq=data.metrics')
Copied!
It is up to you to handle the case when metrics starts out empty. For example:
1
//...in your component
2
​
3
  render() {
4
    return (
5
      <div>
6
        {_.isEmpty(this.props.metrics) ? this.renderLoading() : this.renderDashboard()}
7
      </div>
8
    )
9
  }
Copied!
Alternatively, you can use a placeholder like so:
1
json.metrics(defer: [:auto, placeholder: {total_visitors: 0}]) do
2
  sleep 10 # expensive operation
3
  json.total_visitors 30
4
end
Copied!
Usage with Kaminari
Loading a tab onClick
Last modified 3mo ago
Copy link