Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Some changes to clean up image loading code, and speed up subject image loading.
useEffect
fromuseSubjectImage
, so that image loading code runs on image load, rather than waiting for the next React render cycle.useProgressiveImage
, run theonLoad
handler immediately, rather than waiting for the next event cycle.onLoad
event handlers to useload
events, rather thanImage
objects. This brings the event handlers in line with the DOM standard, and allows them to be attached directly toimg
elements.Please request review from
@zooniverse/frontend
team or an individual member of that team.Package
Linked Issue and/or Talk Post
How to Review
Image behaviour shouldn't have changed much in this PR, but the removal of the effect hooks, and the JS timeout, means that image
onLoad
handlers should run immediately, rather than waiting for the next React render cycle, or for the main browser thread to be free. That's probably not a big deal on a fast machine, but should make a difference to subject loading performance on slower devices.Checklist
PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.
General
yarn panic && yarn bootstrap
ordocker-compose up --build
and FEM works as expectedGeneral UX
Example Staging Project: i-fancy-cats
Refactoring