{"action":"created","issue":{"url":"https://api.github.com/repos/Stanko/react-plx/issues/40","repository_url":"https://api.github.com/repos/Stanko/react-plx","labels_url":"https://api.github.com/repos/Stanko/react-plx/issues/40/labels{/name}","comments_url":"https://api.github.com/repos/Stanko/react-plx/issues/40/comments","events_url":"https://api.github.com/repos/Stanko/react-plx/issues/40/events","html_url":"https://github.com/Stanko/react-plx/issues/40","id":361034281,"node_id":"MDU6SXNzdWUzNjEwMzQyODE=","number":40,"title":"Visibility: hidden until react-plx load","user":{"login":"drewpc","id":1407905,"node_id":"MDQ6VXNlcjE0MDc5MDU=","avatar_url":"https://avatars3.githubusercontent.com/u/1407905?v=4","gravatar_id":"","url":"https://api.github.com/users/drewpc","html_url":"https://github.com/drewpc","followers_url":"https://api.github.com/users/drewpc/followers","following_url":"https://api.github.com/users/drewpc/following{/other_user}","gists_url":"https://api.github.com/users/drewpc/gists{/gist_id}","starred_url":"https://api.github.com/users/drewpc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/drewpc/subscriptions","organizations_url":"https://api.github.com/users/drewpc/orgs","repos_url":"https://api.github.com/users/drewpc/repos","events_url":"https://api.github.com/users/drewpc/events{/privacy}","received_events_url":"https://api.github.com/users/drewpc/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-09-17T20:38:18Z","updated_at":"2018-09-19T21:40:10Z","closed_at":null,"author_association":"NONE","body":"I have an isomorphic application that renders a header with an image + text.  I'm using react-plx to provide a parallax effect where the image and text scroll at different rates.  When my server renders the HTML, the line below from react-plx makes the image + text area not visible until after JS has loaded:\r\n\r\nhttps://github.com/Stanko/react-plx/blob/6019ace4a3f96ac25a3359962054a51e25cf3f93/source/Plx.js#L813\r\n\r\nIf I disable Javascript on my browser (so that I view the server side rendered HTML only), I would expect the image + text to load and scroll as normal with the page.  Instead, I don't see any image or text and it just looks weird.  I see the same thing on your live demo site: without Javascript turned on in the browser, none of the content loads below the link to Github.\r\n\r\nDo you think there's a way to refactor the `showElement` logic so that the content is rendered on page load and then changed when the client takes over?  Or does that cause the page to jump if scrolled?"},"comment":{"url":"https://api.github.com/repos/Stanko/react-plx/issues/comments/422967886","html_url":"https://github.com/Stanko/react-plx/issues/40#issuecomment-422967886","issue_url":"https://api.github.com/repos/Stanko/react-plx/issues/40","id":422967886,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMjk2Nzg4Ng==","user":{"login":"Stanko","id":776788,"node_id":"MDQ6VXNlcjc3Njc4OA==","avatar_url":"https://avatars2.githubusercontent.com/u/776788?v=4","gravatar_id":"","url":"https://api.github.com/users/Stanko","html_url":"https://github.com/Stanko","followers_url":"https://api.github.com/users/Stanko/followers","following_url":"https://api.github.com/users/Stanko/following{/other_user}","gists_url":"https://api.github.com/users/Stanko/gists{/gist_id}","starred_url":"https://api.github.com/users/Stanko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Stanko/subscriptions","organizations_url":"https://api.github.com/users/Stanko/orgs","repos_url":"https://api.github.com/users/Stanko/repos","events_url":"https://api.github.com/users/Stanko/events{/privacy}","received_events_url":"https://api.github.com/users/Stanko/received_events","type":"User","site_admin":false},"created_at":"2018-09-19T21:40:10Z","updated_at":"2018-09-19T21:40:10Z","author_association":"OWNER","body":"The first load is the problematic one, once cached it doesn't jump (at least in chrome, I would need to test IEs 🙃). \r\n\r\nI recorded this gif with dev tools and \"Disable cache\" active, and you can see on refresh, server renders the first frame followed by the jump when client app loads.\r\n\r\n![test](https://user-images.githubusercontent.com/776788/45782947-b4bf7d80-bc64-11e8-8d67-34ae0b2bbf58.gif)\r\n\r\nUnfortunately, universal rendering is full of problems like this. Probably the best solution is to make that visibility thing optional through props. TBH I'm not a huge fan of adding too many props, but it seems like a only way in this scenario.\r\n\r\nCheers!\r\n"}}
{"actor":{"display_login":"Stanko"}}