feat: improve asset loading

[KristinAoki]

Description

Remove unnecessary API calls

This PR improves the load time of the text editor, problem editor, and video editor. Previously all data that was required for any editor type at initialization was loaded, even if it was not necessary for the editor in-use. This means the text editor was loading course videos even it would never be using that data. Now the initialization function checks the editor and only calls the required APIs.

Reducing the need for all assets at load time

The need for all course assets to be fetched during initialization was removed. Now only the first fifty (50) images for a course are loaded for the text and problem editors. Previously all course assets were needed to update and write /static/ URLs, but assets all have a specific key pattern so the replace and set functions for the URLs are able to use a pattern matcher rather then copying data from the asset object.

Adding Lazy Load for SelectImageModal

To improve load time, the number of image assets fetched at load time was reduced to fifty (50), the default page size. However a course can have more than fifty images, so lazy loading was added to the SelectImageModal. This makes it quicker to load the editor and makes it easier for the user to scroll through the images. In the case that there are only fifty images or less for a course or the images are being filter are less than or equal to fifty, the load more button will not appear.

Supporting Information

JIRA Ticket: TNL-10869

Lazy-Loading assets like images, transcripts, and handouts.

• This is for blocks that have asset galleries that display all course assets (html, problem)
• Should not impact loading of images that are directly referenced in a block already, nor should it impact the adding of static URLs in the source code view for html blocks

Testing

1. Open each of the editors and check the logs to see which actions have been called
   • The text and problem editors should call fetchBlock, fetchUnit, and fetchImages
   • The video editor should call fetchBlock, fetchUnit, fetchVideos, fetchCourseDetailsView, fetchStudioView
2. Add a new image to a html block
3. Click the "HTML" button
4. Confirm that all the images are relative URLS
5. Confirm that all the relative URLS follow asset-v1:{org}+{number+{run}+type@asset+block@{key_safe_name}
6. Click the "HTML" button
7. Update one of the relative URLs for an image to /static/{key_safe_name} (aka the Studio URL)
8. Click "Save"
9. Confirm that the image is still viewable in the editor
10. Click "Save"
11. Confirm that all links and images in html block are viewable on the unit page
12. Click "Edit"
13. Confirm that block loads as expected
14. Open a video block
15. Click "Replace video"
16. Confirm that list displays as expected
17. Add a name to search by
18. Confirm that the expect results are displayed

[KristinAoki]

I did not mention that in the description because that API call is not part of the initialization call.