Open envas opened 1 month ago
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:
In your page or layout, remove the [googlePhotosAlbums]
component
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'),
];
}
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 #}
I will keep this issue open, so I remember to work on this when I get some time
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.