Temporarily has Pedram's code from the BFF until that PR is merged. This allows us to use the data in the form it will be. Having Pedram's work on the URL transformation there appears to allow lazy loading to now work!
Overall changes
Uses the lazyload boolean that already existed to add the lazy loading attribute.
Also passes in 'position' into the component because we need to stop the image lazy loading if the message banner or billboard is used as the first curation.
We have found that this lazy loading work in Chrome but not in Firefox. It seems that lazy loading requires a width in order to work properly, and we are using an aspect ratio in the message banner that overrides the width and height when passed into the image component. When I remove the aspect ratio and the lazy load attribute remains, the image now loads (lazily), but is the wrong dimensions. We need the aspect ratio to remain in order for the image to look right. So either we would need to work at somehow changing the code to not use the aspect ratio in this way (which we don't know is possible), or we leave the lazy loading attrubute being passed in and get the benefits of lazy loading on chrome, while sacrificing the image loading at all on Firefox.
It has been decided to raise the issue with Mozilla to see if this can be fixed, and in the meantime leave the images not lazy loading. As the images are webp, they hopefully don't increase the page weight and performance too much now.
Code changes
A bullet point list of key code changes that have been made.
Testing
List the steps used to test this PR.
Helpful Links
Add Links to useful resources related to this PR if applicable.
Temporarily has Pedram's code from the BFF until that PR is merged. This allows us to use the data in the form it will be. Having Pedram's work on the URL transformation there appears to allow lazy loading to now work!
Overall changes
Uses the lazyload boolean that already existed to add the lazy loading attribute. Also passes in 'position' into the component because we need to stop the image lazy loading if the message banner or billboard is used as the first curation.
We have found that this lazy loading work in Chrome but not in Firefox. It seems that lazy loading requires a width in order to work properly, and we are using an aspect ratio in the message banner that overrides the width and height when passed into the image component. When I remove the aspect ratio and the lazy load attribute remains, the image now loads (lazily), but is the wrong dimensions. We need the aspect ratio to remain in order for the image to look right. So either we would need to work at somehow changing the code to not use the aspect ratio in this way (which we don't know is possible), or we leave the lazy loading attrubute being passed in and get the benefits of lazy loading on chrome, while sacrificing the image loading at all on Firefox.
It has been decided to raise the issue with Mozilla to see if this can be fixed, and in the meantime leave the images not lazy loading. As the images are webp, they hopefully don't increase the page weight and performance too much now.
Code changes
Testing
Helpful Links
Add Links to useful resources related to this PR if applicable.
Coding Standards
Repository use guidelines