Loading indicator on large album list

[envas]

We have approximately 100 albums, and retrieving the list takes a long time. The same is true for albums with a large number of photos. Because the component's API call starts before the page is rendered, there is no chance of a loading indicator showing. It would be nice to have some JavaScript 'before API call' callback to allow a loading indicator.

[Fl0Cri]

This is an interesting idea, we may think about implementing some kind of lazy-loading in the future, but we must be careful to not break things for people who have overridden the partials of this component.

For now, here is a trick to lazy-load the albums list using October's AJAX framework:

1. In your page or layout, remove the [googlePhotosAlbums] component

2. Instead, add the following function in the code section:

   function onLoadGooglePhotosAlbums()
   {
   // Register the component dynamically when this handler is called
   $component = $this->controller->addComponent('googlePhotosAlbums', 'googlePhotosAlbums', [
       'albumPage' => 'google-photos/album',
       'thumbHeight' => 160,
       'thumbWidth' => 160,
       'shouldCrop' => 1,
   ]);
   
   // Specific to this component: ask to load gallery data. This may not be necessary in a future version
   $component->onRun();
   
   // Replace spinner by the gallery
   return [
       '#googlePhotosAlbums' => $this->renderComponent('googlePhotosAlbums'),
   ];
   }

3. Finally, in the html section of the page, replace {% component 'googlePhotosAlbums' %} by this:

   
   {# The container for the gallery #}
   <div id="googlePhotosAlbums">
   {# Inside, put a spinner or anything to be shown on page load. In this example, this is a Bootstrap 5 spinner #}
   <div class="spinner-border" role="status">
       <span class="visually-hidden">Loading...</span>
   </div>
   </div>

{# Some JS to trigger the onLoadGooglePhotosAlbums() handler after the page is loaded #}

[Fl0Cri]

I will keep this issue open, so I remember to work on this when I get some time