Quiz Creation Select Resources - UX Improvements

[nucleogenesis]

Overview

Currently the "View more" button is not working exactly as expected, resulting in a wonky user experience. This issue's resolution will bring the lazy loading feature up to par and ensure that the back arrow works as expected.

One issue may revolve around the fetchTree API endpoint and/or how we're using the method. For example, using this channel tigil-fajod, you can see that the "View more" only seems to fetch a portion of what remains.

Acceptance criteria

View more

• The "View more" button should be replaced with a KCircularLoader when it is clicked and things are loading.

• The "View more" loading state might require that we create a separate "loading" ref in the useQuizResources (something like loadingMore) -- which can be leveraged for the above requirement

• The "View more" button should fetch up to the same amount of resources that the initial fetch did (ie, if we're fetching 20 to begin with, fetching more should give us 20 more) -- currently it seems we're fetching 5 more at a time. Look first toward updating the moreParams, if possible, to indicate that we want more than the default value.

• The "View more" button currently is forcing the scroll position to the top of the page -- we should be able to stay where we were to begin with. NOTE: I do not believe this is caused by the issue we'll fix in Coach routing: Flash of white on every route navigation in Quiz Creation #11732 -- but if it is, then this particular criteria can be punted to a follow-up issue to avoid being blocked by parallel work)

Back arrow icon

• The back arrow should only be visible when, in the context of the side panel, there is somewhere within the panel to go back to. Putting it differently: the back arrow does not close the panel - so if clicking the "Back button" in the browser would close the panel by navigating out of the resource selection route, then the arrow should not be visible. (Note that there is a persistent X icon which will always go to close the panel)

• The back arrow should, basically, do the same thing as clicking the browser "Back" button

• Reach out to @tomiwao and @radinamatic re: this question -- If we have this "Back" icon, should we also have a "Forward" icon? Since this is basically just mimicking the functionality of browser back, should we do both? and implement the outcome of that discussion.