{"action":"created","issue":{"url":"https://api.github.com/repos/theonion/bulbs-elements/issues/120","repository_url":"https://api.github.com/repos/theonion/bulbs-elements","labels_url":"https://api.github.com/repos/theonion/bulbs-elements/issues/120/labels{/name}","comments_url":"https://api.github.com/repos/theonion/bulbs-elements/issues/120/comments","events_url":"https://api.github.com/repos/theonion/bulbs-elements/issues/120/events","html_url":"https://github.com/theonion/bulbs-elements/pull/120","id":167394429,"number":120,"title":"[exploratory] load on demand","user":{"login":"collin","id":7783,"avatar_url":"https://avatars.githubusercontent.com/u/7783?v=3","gravatar_id":"","url":"https://api.github.com/users/collin","html_url":"https://github.com/collin","followers_url":"https://api.github.com/users/collin/followers","following_url":"https://api.github.com/users/collin/following{/other_user}","gists_url":"https://api.github.com/users/collin/gists{/gist_id}","starred_url":"https://api.github.com/users/collin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/collin/subscriptions","organizations_url":"https://api.github.com/users/collin/orgs","repos_url":"https://api.github.com/users/collin/repos","events_url":"https://api.github.com/users/collin/events{/privacy}","received_events_url":"https://api.github.com/users/collin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-07-25T15:26:51Z","updated_at":"2016-07-25T15:44:57Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/theonion/bulbs-elements/pulls/120","html_url":"https://github.com/theonion/bulbs-elements/pull/120","diff_url":"https://github.com/theonion/bulbs-elements/pull/120.diff","patch_url":"https://github.com/theonion/bulbs-elements/pull/120.patch"},"body":"This implements load-on-demand per component. Like betty-cropper's image.js.\r\n\r\nIn this example, `ComponentToLoadOnDemand` would not be rendered until it was within 200px of the viewport.\r\n\r\n```js\r\nimport { LoadOnDemand } from 'bulbs-elements/util';\r\n\r\nclass ComponentToLoadOnDemand extends React.Component {\r\n  render () {\r\n    return <h1> Hoopla </h1>\r\n  }\r\n}\r\n\r\nexport default function WrappedComponent (props) {\r\n  return <LoadOnDemand\r\n    component={ComponentToLoadOnDemand}\r\n    componentProps={props}\r\n  />;\r\n}\r\n```\r\n\r\nConcretely, we could us this with the `<rail-player>` element:\r\n\r\nIn `..../rail-player.js`:\r\n\r\n```js\r\nexport class RailPlayer extends BulbsElement {\r\n  /* Rail player implementation */\r\n}\r\n\r\nregisterReactElement('rail-player', (props) => {\r\n  return <LoadOnDemand\r\n    component={RailPlayer}\r\n    componentProps={props}\r\n  />;\r\n});\r\n```"},"comment":{"url":"https://api.github.com/repos/theonion/bulbs-elements/issues/comments/234992982","html_url":"https://github.com/theonion/bulbs-elements/pull/120#issuecomment-234992982","issue_url":"https://api.github.com/repos/theonion/bulbs-elements/issues/120","id":234992982,"user":{"login":"spra85","id":423943,"avatar_url":"https://avatars.githubusercontent.com/u/423943?v=3","gravatar_id":"","url":"https://api.github.com/users/spra85","html_url":"https://github.com/spra85","followers_url":"https://api.github.com/users/spra85/followers","following_url":"https://api.github.com/users/spra85/following{/other_user}","gists_url":"https://api.github.com/users/spra85/gists{/gist_id}","starred_url":"https://api.github.com/users/spra85/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/spra85/subscriptions","organizations_url":"https://api.github.com/users/spra85/orgs","repos_url":"https://api.github.com/users/spra85/repos","events_url":"https://api.github.com/users/spra85/events{/privacy}","received_events_url":"https://api.github.com/users/spra85/received_events","type":"User","site_admin":false},"created_at":"2016-07-25T15:44:57Z","updated_at":"2016-07-25T15:44:57Z","body":"I was envisioning using an attribute instead of an additional wrapped component layer, something like: \r\n\r\n`<rail-player src=\"/video/12457.json\" lazy>`\r\n\r\nI just feel like there might be scenarios where you want to use the component but you know they're at the top of the page and you might not want to wait for the `resize` or `scroll` events to fire so baking in the flexibility to decide lazy or not as an attr seems to make sense.  Thoughts?"}}
{"actor":{"display_login":"spra85"}}