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 #}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        oc.request(this, 'onLoadGooglePhotosAlbums'); // OC >= 3
        // $(this).request('onLoadGooglePhotosAlbums'); // OC < 3 (needs jQuery)
    });
</script>

[Fl0Cri]

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