add image lazy loading using wagtail-lazyimages plugin

[HamzaIbnFarooq]

Pre-Flight checklist

• Testing
  • Code is tested
  • Changes have been manually tested

What are the relevant tickets?

#2065

What's this PR do?

Uses wagtail-lazyimages plugin and customizes it in a wrapper template tag (wagtail_image_lazy_load) to achieve enhanced caching

NOTE:

1. Signatory images should not use this feature as if a person opens the certificate and directly prints it, without getting it into the viewport, a blurry signature will be displayed in the pdf.
2. Some image tag filters like "height-110|format-png" are not supported by Wagtail-lazyimages plugin so I couldn't use it in learning-techniques.html inorder to use it we need to change that filter to something like max-150x150|format-png
   I have changed this in this commit

[codecov-io]

Codecov Report

Merging #2081 (528da62) into master (3aaef79) will increase coverage by 9.14%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #2081      +/-   ##
==========================================
+ Coverage   88.00%   97.14%   +9.14%     
==========================================
  Files         328      157     -171     
  Lines       14759     4934    -9825     
  Branches     1030        0    -1030     
==========================================
- Hits        12988     4793    -8195     
+ Misses       1532      141    -1391     
+ Partials      239        0     -239     

Impacted Files	Coverage Δ
static/js/components/forms/BulkEnrollmentForm.js	90.62% <0.00%> (-1.57%)	⬇️
cms/forms.py
mitxpro/permissions.py
sheets/deferral_request_api.py
authentication/views.py
courseware/api.py
b2b_ecommerce/conftest.py
ecommerce/models.py
courses/management/utils.py
mitxpro/templatetags/render_bundle.py
... and 161 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3aaef79...528da62. Read the comment docs.

[arslanashraf7]

@HamzaIbnFarooq I was able to test it on /catalog page but while testing it on homepage i see below error, related to learning-techniques.html. You will have to add learning techniques section in Home Page to reproduce it, let me know if you'll need more info.

Exception Value:	filter specs in 'image' tag may only contain A-Z, a-z, 0-9, dots, hyphens and underscores. (given filter: "height-110|format-png")

`

[HamzaIbnFarooq]

Exception Value: filter specs in 'image' tag may only contain A-Z, a-z, 0-9, dots, hyphens and underscores. (given filter: "height-110|format-png")

Thanks @arslanashraf7, for the review, that filter ("height-110|format-png") isn't supported by Wagtail-lazyimages plugin so I have removed its usage from https://github.com/mitodl/mitxpro/blob/master/cms/templates/partials/learning-techniques.html#L8

Updated:
I have updated the image tag in this commit

[gsidebo]

Ideally we wouldn't need to specify the same class for every one of these images. It would be nice to have a default class and the option to extend. A param like addedClass might make sense. Also, the class can just be called lazy instead of wagtail-lazy-load

[HamzaIbnFarooq]

I do agree with your suggestions but I am trying to keep it as simple as we can. The issue is with the template tag we are using, when we create a simple_tag @register.simple_tag() it works as a function to which you can pass values and do some **kwargs stuff but in our case, we have to use @register.tag(name="xyz") as the function have to call another wagtail's tag named image.
Both the tags have different parsing techniques. So adding a new attribute makes the whole process complicated and messy.
As far as changing the name of wagtail-lazy-load to lazy is concerned, I have updated that.

[gsidebo]

This approach is clean enough in terms of avoiding code repetition, and it's unfortunate that the library doesn't give us extension options, but I'm not sure I agree with this approach of generating the image tag with the library implementation, parsing it as XML, adding attributes, and casting it as a string again. I think I would prefer even a regex replace – after all, we're just tacking on the same ?v=<hash> to the end of those two attribute values. The XML parsing just seems like more work than we need to be doing.

[HamzaIbnFarooq]

Updated.

[gsidebo]

Selector can be changed to img.lazy if you change that class name

[HamzaIbnFarooq]

updated.

[gsidebo]

@HamzaIbnFarooq Sorry, I should have looked into this in my earlier review, but I noticed an issue with this library. Wagtail generates images on the fly depending on how you render them. This caused major performance issues for us, so we introduced a change to cache those generated images in Redis (#2029). Unfortunately it looks like the _lazy versions of the images are not being added to the Redis cache, so those images must be generated each time they're requested. We still have issues with temporary outages or slow responses with these images even when they're in the Redis cache (#2019), so I'm worried that this will cause more problems than it solves. One option would be to fork this plugin repo and make sure it uses the cache, but that could be a lot of work. For now unfortunately I think the best option is to put this PR on hold. Again, sorry to put the brakes on this. Let me know what you think.

[HamzaIbnFarooq]

@gsidebo Thanks for the detailed review. I didn't know about the whole rendition process, I spent some time understanding it but as you said it's somewhat challenging to integrate into our scenario.
I will put this on-hold but besides that what if we add a new placeholder image through cms or as a static asset in our project and use that same image as _lazy for all the lazy loading images so that our purpose will be fulfilled?

[gsidebo]

Closing this. The library didn't suit our needs