{"action":"created","issue":{"url":"https://api.github.com/repos/lavrton/react-konva/issues/145","repository_url":"https://api.github.com/repos/lavrton/react-konva","labels_url":"https://api.github.com/repos/lavrton/react-konva/issues/145/labels{/name}","comments_url":"https://api.github.com/repos/lavrton/react-konva/issues/145/comments","events_url":"https://api.github.com/repos/lavrton/react-konva/issues/145/events","html_url":"https://github.com/lavrton/react-konva/issues/145","id":274707141,"number":145,"title":"React 16 upgrade issue - Initial image load only partially renders object (stroke but no image) ","user":{"login":"bmoquist","id":4001159,"avatar_url":"https://avatars1.githubusercontent.com/u/4001159?v=4","gravatar_id":"","url":"https://api.github.com/users/bmoquist","html_url":"https://github.com/bmoquist","followers_url":"https://api.github.com/users/bmoquist/followers","following_url":"https://api.github.com/users/bmoquist/following{/other_user}","gists_url":"https://api.github.com/users/bmoquist/gists{/gist_id}","starred_url":"https://api.github.com/users/bmoquist/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bmoquist/subscriptions","organizations_url":"https://api.github.com/users/bmoquist/orgs","repos_url":"https://api.github.com/users/bmoquist/repos","events_url":"https://api.github.com/users/bmoquist/events{/privacy}","received_events_url":"https://api.github.com/users/bmoquist/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-11-17T00:01:37Z","updated_at":"2017-11-18T04:40:26Z","closed_at":"2017-11-18T04:40:26Z","author_association":"NONE","body":"My application can reconstruct a saved stage from a Redux store based on a previously saved stage's data. After upgrading to the new React-Konva 1.6.2 and React 16.1.1, the application only partially loads images when the trigger event occurs — showing the stroke but not the image. The render remains unfilled until another render event happens (e.g. an unrelated button click) — then, the images are immediately filled.\r\n\r\nPrior to upgrade, loading images would first show the stroke and then automatically populate the image inside when it finished loading.\r\n\r\nHere is an screenshot of the behavior with two images (~100-200kb each). \r\n\r\nInitial render:\r\n<img width=\"557\" alt=\"screen shot 2017-11-16 at 5 09 12 pm\" src=\"https://user-images.githubusercontent.com/4001159/32922179-a317fe5a-caf6-11e7-8ed6-f6ef114260dd.png\">\r\n\r\nAfter another event occurs -- the images populate:\r\n<img width=\"529\" alt=\"screen shot 2017-11-16 at 5 09 21 pm\" src=\"https://user-images.githubusercontent.com/4001159/32922186-a84638d8-caf6-11e7-97ba-d2376e3cf50f.png\">\r\n\r\nLoading the images and other related data to reconstruct the Stage takes place with multiple actions in a Redux Thunk. For images, the following is done for each image URL prior to be placement on the stage: \r\n```\r\nlet newImgObj = new window.Image()\r\nnewImgObj.crossOrigin = imageCrossOriginSetting\r\nnewImgObj.src = imageURL\r\n```\r\n\r\nThen, the image object is eventually passed into the standard Konva Image: \r\n```\r\n  <Image\r\n        ref=“image1”\r\n        name={this.props.name}\r\n        image={this.props.imgObj}\r\n      \t… other props\r\n        />\r\n```\r\nAfter the image’s first render, this partial loading behavior generally goes away, and the image loads immediately (presumably from cache).\r\n\r\nIs there a way to get the image's onload callback to trigger render when finished or another recommended means to overcome this so the images render automatically when they are ready as before prior to this upgrade?\r\n\r\nAny suggestions/help would be appreciated -- thanks much!"},"comment":{"url":"https://api.github.com/repos/lavrton/react-konva/issues/comments/345417956","html_url":"https://github.com/lavrton/react-konva/issues/145#issuecomment-345417956","issue_url":"https://api.github.com/repos/lavrton/react-konva/issues/145","id":345417956,"user":{"login":"bmoquist","id":4001159,"avatar_url":"https://avatars1.githubusercontent.com/u/4001159?v=4","gravatar_id":"","url":"https://api.github.com/users/bmoquist","html_url":"https://github.com/bmoquist","followers_url":"https://api.github.com/users/bmoquist/followers","following_url":"https://api.github.com/users/bmoquist/following{/other_user}","gists_url":"https://api.github.com/users/bmoquist/gists{/gist_id}","starred_url":"https://api.github.com/users/bmoquist/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bmoquist/subscriptions","organizations_url":"https://api.github.com/users/bmoquist/orgs","repos_url":"https://api.github.com/users/bmoquist/repos","events_url":"https://api.github.com/users/bmoquist/events{/privacy}","received_events_url":"https://api.github.com/users/bmoquist/received_events","type":"User","site_admin":false},"created_at":"2017-11-18T04:40:26Z","updated_at":"2017-11-18T04:40:26Z","author_association":"NONE","body":"Got it - made the changes with no issues. Thanks for all your hard work on this project, Anton!"}}
{"actor":{"display_login":"bmoquist"}}