{"action":"created","issue":{"url":"https://api.github.com/repos/ebiwd/EBI-Pattern-library/issues/14","repository_url":"https://api.github.com/repos/ebiwd/EBI-Pattern-library","labels_url":"https://api.github.com/repos/ebiwd/EBI-Pattern-library/issues/14/labels{/name}","comments_url":"https://api.github.com/repos/ebiwd/EBI-Pattern-library/issues/14/comments","events_url":"https://api.github.com/repos/ebiwd/EBI-Pattern-library/issues/14/events","html_url":"https://github.com/ebiwd/EBI-Pattern-library/issues/14","id":183688119,"number":14,"title":"Loading animations and placeholders","user":{"login":"khawkins98","id":928100,"avatar_url":"https://avatars.githubusercontent.com/u/928100?v=3","gravatar_id":"","url":"https://api.github.com/users/khawkins98","html_url":"https://github.com/khawkins98","followers_url":"https://api.github.com/users/khawkins98/followers","following_url":"https://api.github.com/users/khawkins98/following{/other_user}","gists_url":"https://api.github.com/users/khawkins98/gists{/gist_id}","starred_url":"https://api.github.com/users/khawkins98/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/khawkins98/subscriptions","organizations_url":"https://api.github.com/users/khawkins98/orgs","repos_url":"https://api.github.com/users/khawkins98/repos","events_url":"https://api.github.com/users/khawkins98/events{/privacy}","received_events_url":"https://api.github.com/users/khawkins98/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-10-18T13:36:00Z","updated_at":"2016-10-21T09:55:22Z","closed_at":null,"body":"Many teams across the campus have various dynamic lazy-loading content -- it can be found in search boxes (the EBI homepage) and dynamically loading pages (Angular and Handlebars). \r\n\r\nSo how can we best:\r\n1. indicate to users that stuff is coming,\r\n2. not annoy users with [terrible aggressive animations](http://preloaders.net/en/3d/hot-dog-animated/), and\r\n3. [hint at the content that is coming](http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html) and make the pages feel a bit faster by teasing the content\r\n\r\nAnd then once we identify a couple of major patterns, let's try and template out some reusable code for use upstream in the EBI Visual Framework."},"comment":{"url":"https://api.github.com/repos/ebiwd/EBI-Pattern-library/issues/comments/255341614","html_url":"https://github.com/ebiwd/EBI-Pattern-library/issues/14#issuecomment-255341614","issue_url":"https://api.github.com/repos/ebiwd/EBI-Pattern-library/issues/14","id":255341614,"user":{"login":"khawkins98","id":928100,"avatar_url":"https://avatars.githubusercontent.com/u/928100?v=3","gravatar_id":"","url":"https://api.github.com/users/khawkins98","html_url":"https://github.com/khawkins98","followers_url":"https://api.github.com/users/khawkins98/followers","following_url":"https://api.github.com/users/khawkins98/following{/other_user}","gists_url":"https://api.github.com/users/khawkins98/gists{/gist_id}","starred_url":"https://api.github.com/users/khawkins98/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/khawkins98/subscriptions","organizations_url":"https://api.github.com/users/khawkins98/orgs","repos_url":"https://api.github.com/users/khawkins98/repos","events_url":"https://api.github.com/users/khawkins98/events{/privacy}","received_events_url":"https://api.github.com/users/khawkins98/received_events","type":"User","site_admin":false},"created_at":"2016-10-21T09:55:22Z","updated_at":"2016-10-21T09:55:22Z","body":"One other comment, mainly in @nbuso 's direction: I would say that you won't want to use more than one spinner/content placeholder animation on the page at a time. \r\n\r\nWhat might work well:\r\n1) Use the Angular progress bar OR a spinner like RNAcentral has done; and pair that with\r\n2) Non-animated content placeholder images that tease what is coming (like the below one from Facebook)\r\n\r\n![screen shot 2016-10-21 at 10 54 38](https://cloud.githubusercontent.com/assets/928100/19594432/dbd85284-977c-11e6-947e-6dde449b9833.png)\r\n"}}
{"actor":{"display_login":"khawkins98"}}