{"action":"created","issue":{"url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/5956","repository_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website","labels_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/5956/labels{/name}","comments_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/5956/comments","events_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/5956/events","html_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/5956","id":240300758,"number":5956,"title":"Loading spinner for letters and gibs","user":{"login":"annekainicUSDS","id":25183456,"avatar_url":"https://avatars3.githubusercontent.com/u/25183456?v=3","gravatar_id":"","url":"https://api.github.com/users/annekainicUSDS","html_url":"https://github.com/annekainicUSDS","followers_url":"https://api.github.com/users/annekainicUSDS/followers","following_url":"https://api.github.com/users/annekainicUSDS/following{/other_user}","gists_url":"https://api.github.com/users/annekainicUSDS/gists{/gist_id}","starred_url":"https://api.github.com/users/annekainicUSDS/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/annekainicUSDS/subscriptions","organizations_url":"https://api.github.com/users/annekainicUSDS/orgs","repos_url":"https://api.github.com/users/annekainicUSDS/repos","events_url":"https://api.github.com/users/annekainicUSDS/events{/privacy}","received_events_url":"https://api.github.com/users/annekainicUSDS/received_events","type":"User","site_admin":false},"labels":[{"id":314912936,"url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/labels/in%20progress","name":"in progress","color":"5319e7","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-07-04T03:10:56Z","updated_at":"2017-07-06T14:46:59Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/pulls/5956","html_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/5956","diff_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/5956.diff","patch_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/5956.patch"},"body":"Connects to https://github.com/department-of-veterans-affairs/vets.gov-team/issues/3567\r\n\r\nThis adds a loading spinner to both letters and gibs until data is returned from the fetch and stored in state. This solves the problem of the component starting to render before data is returned, resulting in a lot of blank or \"undefined\" field values in the UI for the second(s) it takes for the fetch and store update to complete.\r\n\r\nThe reason why the components were rendering without all of the data is because the fetch for the data happens in the `componentDidMount`, which is called after the component is mounted and rendering begins. The action to fetch the data would be dispatched from `componentDidMount`, then upon a successful response it would update the store in the reducer. This store update would cause a re-rendering of the component, at which point the data would be rendered in the component.\r\n\r\nWhat this PR does is to check if the app is available (passed down in props), meaning the fetch has returned, before determining what to render. There are three options of what `this.props.available` could be:\r\n1. If `this.props.available === true`, it means the fetch successfully returned the data, so the children components can be rendered. \r\n2. If `this.props.available === undefined`, it means the fetch has not returned the data yet because this value has not yet been set, and the loading indicator can be rendered.\r\n3. If `this.props.available === false`, it means there was a failure to fetch the data, in which case a generic error message is rendered (need content for this still)\r\n\r\nThis is a very simplistic way of handling this. In looking at how other apps are doing this on Vets.gov, some actually dispatch separate actions to determine the loading status of the app, and store that status in the store as a boolean value, which is then passed down through props to the components (the normal store update cycle). I felt that this was a bit overkill for simply determining whether or not to render a loading indicator, and didn't want to unnecessarily store another value in state just for the loading status. We have a value in the store already (`available`) that should be enough to tell us what the status of the fetch is, so I wanted to just leverage that. Curious to get thoughts on this approach."},"comment":{"url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/comments/313418303","html_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/5956#issuecomment-313418303","issue_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/5956","id":313418303,"user":{"login":"robbiethegeek-usds","id":25180632,"avatar_url":"https://avatars0.githubusercontent.com/u/25180632?v=3","gravatar_id":"","url":"https://api.github.com/users/robbiethegeek-usds","html_url":"https://github.com/robbiethegeek-usds","followers_url":"https://api.github.com/users/robbiethegeek-usds/followers","following_url":"https://api.github.com/users/robbiethegeek-usds/following{/other_user}","gists_url":"https://api.github.com/users/robbiethegeek-usds/gists{/gist_id}","starred_url":"https://api.github.com/users/robbiethegeek-usds/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robbiethegeek-usds/subscriptions","organizations_url":"https://api.github.com/users/robbiethegeek-usds/orgs","repos_url":"https://api.github.com/users/robbiethegeek-usds/repos","events_url":"https://api.github.com/users/robbiethegeek-usds/events{/privacy}","received_events_url":"https://api.github.com/users/robbiethegeek-usds/received_events","type":"User","site_admin":false},"created_at":"2017-07-06T14:46:59Z","updated_at":"2017-07-06T14:46:59Z","body":"This looks clean to me, happy to LGTM, if you want to wait on @raquelromano-gov for a final 👍 that makes sense she is more familiar with this code.\r\n\r\n"}}
{"actor":{"display_login":"robbiethegeek-usds"}}