{"action":"created","issue":{"url":"https://api.github.com/repos/mattermost/mattermost-webapp/issues/2103","repository_url":"https://api.github.com/repos/mattermost/mattermost-webapp","labels_url":"https://api.github.com/repos/mattermost/mattermost-webapp/issues/2103/labels{/name}","comments_url":"https://api.github.com/repos/mattermost/mattermost-webapp/issues/2103/comments","events_url":"https://api.github.com/repos/mattermost/mattermost-webapp/issues/2103/events","html_url":"https://github.com/mattermost/mattermost-webapp/pull/2103","id":385495508,"node_id":"MDExOlB1bGxSZXF1ZXN0MjM0NDU0NDc3","number":2103,"title":"MM-13198 Add placeholder when loading images","user":{"login":"hmhealey","id":3277310,"node_id":"MDQ6VXNlcjMyNzczMTA=","avatar_url":"https://avatars3.githubusercontent.com/u/3277310?v=4","gravatar_id":"","url":"https://api.github.com/users/hmhealey","html_url":"https://github.com/hmhealey","followers_url":"https://api.github.com/users/hmhealey/followers","following_url":"https://api.github.com/users/hmhealey/following{/other_user}","gists_url":"https://api.github.com/users/hmhealey/gists{/gist_id}","starred_url":"https://api.github.com/users/hmhealey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hmhealey/subscriptions","organizations_url":"https://api.github.com/users/hmhealey/orgs","repos_url":"https://api.github.com/users/hmhealey/repos","events_url":"https://api.github.com/users/hmhealey/events{/privacy}","received_events_url":"https://api.github.com/users/hmhealey/received_events","type":"User","site_admin":false},"labels":[{"id":685999255,"node_id":"MDU6TGFiZWw2ODU5OTkyNTU=","url":"https://api.github.com/repos/mattermost/mattermost-webapp/labels/2:%20Dev%20Review","name":"2: Dev Review","color":"eb6420","default":false},{"id":997129920,"node_id":"MDU6TGFiZWw5OTcxMjk5MjA=","url":"https://api.github.com/repos/mattermost/mattermost-webapp/labels/QA%20Review","name":"QA Review","color":"7cdfe2","default":false},{"id":702532842,"node_id":"MDU6TGFiZWw3MDI1MzI4NDI=","url":"https://api.github.com/repos/mattermost/mattermost-webapp/labels/Setup%20Test%20Server","name":"Setup Test Server","color":"0052cc","default":false}],"state":"open","locked":false,"assignee":{"login":"hmhealey","id":3277310,"node_id":"MDQ6VXNlcjMyNzczMTA=","avatar_url":"https://avatars3.githubusercontent.com/u/3277310?v=4","gravatar_id":"","url":"https://api.github.com/users/hmhealey","html_url":"https://github.com/hmhealey","followers_url":"https://api.github.com/users/hmhealey/followers","following_url":"https://api.github.com/users/hmhealey/following{/other_user}","gists_url":"https://api.github.com/users/hmhealey/gists{/gist_id}","starred_url":"https://api.github.com/users/hmhealey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hmhealey/subscriptions","organizations_url":"https://api.github.com/users/hmhealey/orgs","repos_url":"https://api.github.com/users/hmhealey/repos","events_url":"https://api.github.com/users/hmhealey/events{/privacy}","received_events_url":"https://api.github.com/users/hmhealey/received_events","type":"User","site_admin":false},"assignees":[{"login":"hmhealey","id":3277310,"node_id":"MDQ6VXNlcjMyNzczMTA=","avatar_url":"https://avatars3.githubusercontent.com/u/3277310?v=4","gravatar_id":"","url":"https://api.github.com/users/hmhealey","html_url":"https://github.com/hmhealey","followers_url":"https://api.github.com/users/hmhealey/followers","following_url":"https://api.github.com/users/hmhealey/following{/other_user}","gists_url":"https://api.github.com/users/hmhealey/gists{/gist_id}","starred_url":"https://api.github.com/users/hmhealey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hmhealey/subscriptions","organizations_url":"https://api.github.com/users/hmhealey/orgs","repos_url":"https://api.github.com/users/hmhealey/repos","events_url":"https://api.github.com/users/hmhealey/events{/privacy}","received_events_url":"https://api.github.com/users/hmhealey/received_events","type":"User","site_admin":false}],"milestone":null,"comments":2,"created_at":"2018-11-28T23:04:52Z","updated_at":"2018-11-30T02:44:51Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/mattermost/mattermost-webapp/pulls/2103","html_url":"https://github.com/mattermost/mattermost-webapp/pull/2103","diff_url":"https://github.com/mattermost/mattermost-webapp/pull/2103.diff","patch_url":"https://github.com/mattermost/mattermost-webapp/pull/2103.patch"},"body":"This is to fix the aspect ratio of images in the RHS and on small screens while still using the image dimensions to lay out the post before an image is loaded.\r\n\r\nThe reason this ends up being so complicated is because HTML only supports resizing an image and maintaining its aspect ratio if and only if the image has no explicit width or height set, but without a width or height set, the image will pop in and cause the post layout to change. To solve this, we generate a blank image of the correct dimensions (createPlaceholderImage in utils/image_utils.jsx) and render that while the actual image loads in the background (loadImage in utils/image_utils.jsx).\r\n\r\nI tested this on all 5 browsers, and with metadata enabled, I did see some pop in with Firefox on the first page load, but that's fine for now since that's experimental.\r\n\r\n#### Ticket Link\r\nhttps://mattermost.atlassian.net/browse/MM-13198\r\n\r\n#### Checklist\r\n- Added or updated unit tests (required for all new features)"},"comment":{"url":"https://api.github.com/repos/mattermost/mattermost-webapp/issues/comments/443071537","html_url":"https://github.com/mattermost/mattermost-webapp/pull/2103#issuecomment-443071537","issue_url":"https://api.github.com/repos/mattermost/mattermost-webapp/issues/2103","id":443071537,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MzA3MTUzNw==","user":{"login":"mattermod","id":16344077,"node_id":"MDQ6VXNlcjE2MzQ0MDc3","avatar_url":"https://avatars1.githubusercontent.com/u/16344077?v=4","gravatar_id":"","url":"https://api.github.com/users/mattermod","html_url":"https://github.com/mattermod","followers_url":"https://api.github.com/users/mattermod/followers","following_url":"https://api.github.com/users/mattermod/following{/other_user}","gists_url":"https://api.github.com/users/mattermod/gists{/gist_id}","starred_url":"https://api.github.com/users/mattermod/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattermod/subscriptions","organizations_url":"https://api.github.com/users/mattermod/orgs","repos_url":"https://api.github.com/users/mattermod/repos","events_url":"https://api.github.com/users/mattermod/events{/privacy}","received_events_url":"https://api.github.com/users/mattermod/received_events","type":"User","site_admin":false},"created_at":"2018-11-30T02:44:51Z","updated_at":"2018-11-30T02:44:51Z","author_association":"NONE","body":"`Setup Test Server` label detected. Spinmint test server created if build succeeds (checks pass and no conflicts with base branch)."}}
{"actor":{"display_login":"mattermod"}}