Add loader to YourClasses component

[LianaHarris360]

Summary

This pr adds a loader to the YourClasses component to fix flash of text stating "You are not enrolled in any classes" that would previously display before list of classes finished loading.

Page loading with throttling preset Fast 3G:

fast3G.mov

Page loading with throttling Slow 3G:

slow3G.mov

References

Fixes #11043

Reviewer guidance

1. Close an assigned lesson, and go to view of user's assigned classes.
2. May have to open Network tab after inspecting the page and change No throttling to a different browser speed
3. Confirm that no brief flash of the text displays before classes load.

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included

PR process

• 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]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b1.dev0_git.44.g7a6dfdbf.pex
Windows Installer (EXE)	kolibri-0.16.0b1.dev0+git.44.g7a6dfdbf-unsigned.exe
Debian Package	kolibri_0.16.0b1.dev0+git.44.g7a6dfdbf-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b1.dev0+git.44.g7a6dfdbf-0.3.0.dmg
TAR file	kolibri-0.16.0b1.dev0+git.44.g7a6dfdbf.tar.gz
WHL file	kolibri-0.16.0b1.dev0+git.44.g7a6dfdbf-py2.py3-none-any.whl

[MisRob]

Thank you @LianaHarris360, this is a step in a good direction. Setting a fixed timeout in the component will indeed help in some cases, but we can't rely on that in all situations as we don't know how long the loading takes.

For example, see the following recording (please be patient with it, all steps take a while), where I reloaded the Classes page. At first, you will see the circular loader, and after the timeout "You are not enrolled in any classes" gets displayed. However, that's really not the case, because I'm enrolled in classes that are still being fetched so after another while you will see "You are not enrolled in any classes" replaced by class cards.

I'd suggest examining the code which loads the classes for this page (https://github.com/learningequality/kolibri/blob/release-v0.16.x/kolibri/plugins/learn/assets/src/modules/classes/handlers.js#L6) where you can see it sets the global loading state. I think you could use it. Please don't inject it directly to YourClasses component though as we're trying to avoid dependencies to Vuex in smaller components for a number of reasons. You could add loading prop to YourClasses and send this information down from its parent component, AllClassesPage where it's okay to map Vuex state as it's a root business component which already has some Vuex injected.

[LianaHarris360]

Thank you for the suggestion, it was very informative @MisRob I've updated the pr and used the global loading state instead.

[MisRob]

Thanks @LianaHarris360, code changes are looking good to me.

@pcenov @radinamatic Just a note that during QA, you won't see the circular loader like in the original PR recording since when loading the whole page, we currently still follow the pattern to show the linear loader under the top bar.

[pcenov]

I confirm that this is implemented exactly as specified above and the unnecessary text is no longer being displayed while the page is loading.

Noting though that I am not able to open any of the assigned resources in the lesson, and there is a TypeError: Cannot read properties of undefined (reading 'catch') error in the console. If this is not caused by any of the changes in this PR, then it's good to go.

2023-08-09_14-44-40.mp4

[MisRob]

Thank you @pcenov. From the code, I feel confident that this PR shouldn't be causing the other error you describe.