Optimise Library page load time when channels have large Thumbnail

thesujai commented 2 months ago

Summary

As mentioned in the issue this PR does the following changes:

Defines a new API endpoint to get the channel_thumbnail as a img file
Changes the Current internal ChannelMetaData endpoint to return a URL to thumbnail instead directly returning a base64 encoded URL. This will cause async loading for thumbnails in the frontend

ScreenCast Screencast from 02-08-24 01:44:04 PM IST.webm

References

Fixes #12502

Reviewer guidance

Open the library page and observe the channels load immediately, but the corresponding thumbnails loads asynchronously

Testing checklist

[x] Contributor has fully tested the PR manually
[x] If there are any front-end changes, before/after screenshots are included
[ ] Critical user journeys are covered by Gherkin stories
[x] Critical and brittle code paths are covered by unit tests

PR process

[x] PR has the correct target branch and milestone
[ ] PR has 'needs review' or 'work-in-progress' label
[ ] If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
[ ] If this is an important user-facing change, PR or related issue has a 'changelog' label
[ ] If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

github-actions[bot] commented 2 months ago

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.17.0a0.dev0_git.11.gc1417e39.pex
Windows Installer (EXE)	kolibri-0.17.0a0.dev0+git.11.gc1417e39-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0a0.dev0+git.11.gc1417e39-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0a0.dev0+git.11.gc1417e39.dmg
Android Package (APK)	kolibri-0.17.0a0.dev0+git.11.gc1417e39-0.1.4-debug.apk
TAR file	kolibri-0.17.0a0.dev0+git.11.gc1417e39.tar.gz
WHL file	kolibri-0.17.0a0.dev0+git.11.gc1417e39-py2.py3-none-any.whl

thesujai commented 1 month ago

@rtibbles can you take another look?

thesujai commented 1 month ago

I made the changes. You can do the manual testing. Now I can observe that when the library page loads, individual HTTP requests are made to get the thumbnail. The Other libraries section which I suppose makes requests to the public endpoint is not affected by this change, as I see a base64 encoded thumbnail returned in the browser network tab. That is the desired behavior for now.

radinamatic commented 1 month ago

cc @pcenov

pcenov commented 1 month ago

@radinamatic - no issues observed while manually testing, implemented as specified. Good to go!

learningequality / kolibri