Implement individual conditional loading behaviour in every page that uses the CoachImmersivePage

[rtibbles]

Blocked by

#11219

Observed behavior

Every page that uses the CoachImmersivePage was built with the assumption that its components would not be rendered until all relevant data had been loaded.

To prevent this causing issues due to loading of data into state, a global loading guard was added to the CoachImmersivePage in #11392 to ensure that errors did not happen due to the component being instantiated before its data was ready.

Expected behavior

Each individual page should handle its own loading state, according to the guidelines laid out here: https://design-system.learningequality.org/loaders/ and the global loading guard should be removed.

This could be initially addressed by moving the global guard into each individual page component, conditionalized on the core loading state. Follow up work could then happen to allow each individual page to better handle its data loading, in a pattern similar to https://github.com/learningequality/kolibri/blob/release-v0.16.x/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue where handlers are no longer used for data loading, but all data loading is orchestrated from within the composition API setup method.

[muditchoudhary]

Hello @rtibbles @MisRob I am trying to understand this issue and have a fix for it. Could anyone of you assign it to me? I'll ask if I have a question. Thanks!

[MisRob]

Hi @muditchoudhary, thank you for volunteering. This will be possible to resolve after #11219 (work in progress currently) which will prepare ground for this in individual page handlers.

[MisRob]

I added the blocked by section to the issue

[muditchoudhary]

Okay. I will wait for it