search

learningequality / kolibri

Kolibri Learning Platform: the offline app for universal education
https://learningequality.org/kolibri/
MIT License
809 stars 682 forks source link

Use lazy loading for images (when available) to reduce bandwidth requirements on small screens #8266

Open rtibbles opened 3 years ago

rtibbles commented 3 years ago

Observed behavior

On small screens, we may attempt to load many more thumbnail images than might be immediately needed. This can cause slowness and use excessive bandwidth.

Expected behavior

Use lazy load for images to reduce load on mobile devices that support it.

User-facing consequences

Slower loading, higher bandwidth.

FidalMathew commented 9 months ago

@rtibbles Is this issue available for contributors to work on?

rtibbles commented 9 months ago

Yes, although I think the completely general case would need to be done in the KImg component in the Kolibri Design System - resolving this issue would mostly be managed by handling it for folder and resource thumbnails in the learn plugin.

I have assigned you.

rtibbles commented 9 months ago

Note that this is targeted for a 0.16 patch, so you should branch from the release-v0.16.x and target any PR there to avoid issues. We may take a little time to merge as we are freezing most merges on that branch at the moment in preparation for the 0.16.0 release.

FidalMathew commented 9 months ago

Thanks @rtibbles!

rtibbles commented 1 week ago

Removing assignment, as it has been over 8 months.

m3tal10 commented 1 week ago

Hello @rtibbles , I want to work on this. This is my first time contributing to a real open-source project. I have set up the development environment locally. Would you please guide me through this? I know MERN and Django and have Made some projects, but every open-source project seems overwhelming to me. I am willing to contribute and learn from you.

rtibbles commented 6 days ago

Hi @m3tal10 - the main first step for this issue would be to identify places in the Kolibri code base where we use <img> tags. I would start with that, and you can post a list in a comment here.

See the MDN page for the <img> tag for more details on how to set the "lazy" loading attribute on <img> tags as well.

Let me know if that seems like a good path forward, and I can assign you.

m3tal10 commented 6 days ago

Good morning @rtibbles, we are using img tags in the following places in the kolibri codebase:

  1. kolibri/kolibri/core/assets/src/views/AppBar.vue
  2. kolibri/kolibri/core/assets/src/views/SideNav.vue
  3. kolibri/kolibri/plugins/coach/assets/src/views/CoachPrompts/index.vue
  4. kolibri/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
  5. kolibri/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
  6. kolibri/kolibri/plugins/learn/assets/src/views/CardList.vue
  7. kolibri/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
  8. kolibri/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
  9. kolibri/kolibri/plugins/learn/assets/src/views/thumbnails/Thumbnail.vue
  10. kolibri/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue
  11. kolibri/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.

I know about the lazy loading attribute on image tag. <img loading='lazy' src='path'> This syntax lazily loads the images that are outside the viewport. As phone screens have a small viewport, the images outside the viewport should be should not be loaded until they are inside the viewport to reduce the stress on the device. Does this look good?

m3tal10 commented 6 days ago

Hello @rtibbles , I have created a pull request, this is my very first time. Can you check it and tell me if I am doing it right or not, and what are some best practices that I can implement while contributing to open-source projects?

rtibbles commented 5 days ago

Hi @m3tal10 - thanks! I'll take a look at your PR this week and give feedback.