Amp-wp: TemplateInserter extremely slow / lagging

[swissspidy]

When clicking on the button to open the template inserter in the stories editor, it takes more than a second until something happens.

When the template inserter finally opens, you cannot immediately scroll through the template list as some assets (background images, etc.) are still being loaded.

At this point, you'll see incomplete template previews because some images are still missing and fonts are being enqueued.

After that, finally, the template inserter is fully functional!

--

A possible solution would be to how a spinner while the templates are being fetched in order to not delay any UI interactions.

For something like #2012 we'd need such a spinner anyway.

[westonruter]

I noticed this as well.

One thing to improve this would be to render a template only as it comes into view. Lazy loading.

Another thing that comes to mind is ensuring that images in the editor have decoding="async".

[swissspidy]

AFAIK react-virtualized and react-window are the current de facto standards for this kind of lazy loading in React. Might be worth trying these out. Although I think at the moment for ~ 10 templates it's not an urgent thing yet.

As for decoding="async" that would be an interesting thing to do, but it could be tricky to apply to all the images in these nested React components.

[miina]

Looks like lazy loading seems to be the best option here, will look into the options that you suggested, @swissspidy. react-window together with react-window-infinite-loader could be an option.

The delay seems to come only from the BlockPreview and not from fetching the templates -- the fetching happens already when the TemplateInserter is mounted (not when clicking) and at least locally testing it seems that the templates are already loaded when clicking the icon happens.

Most of the images come from background-image CSS so async decoding doesn't seem to be a valid option either, also, as Pascal mentioned, it would be tricky to actually implement it.

Additionally, the background images were already converted to JPEG within https://github.com/ampproject/amp-wp/commit/3720900a38a5a2ff42d53ca13e1d26a9f21e534b and scaled smaller within https://github.com/ampproject/amp-wp/pull/2479/commits/7e843886c5ce46dd3b64729351d203c6c1d4298d but we can probably reduce the image sizes a bit more as well (since we're only using the thumbnails anyway, at least right now).

[swissspidy]

I see, thanks for clarifying! So it's just a render that's blocking the main thread I guess.

I've also asked about this on Slack. While there was no immediate answer, it was suggested that this would be a good use case for the upcoming Concurrent Mode in React.

[miina]

Yep, saw your question on Slack, thanks for asking about that. Also checked into concurrent mode before -- would be a good use case for that, maybe it would be good to add a @todo comment to the code for future reference as well.

[kienstra]

Request For Testing

Hi @csossi,
Could you please test this?

Steps:

1. Create a new story
2. Click the 'Template Inserter'
3. Expected: a 'spinner' appears on loading the templates:
   
4. Expected: the templates load relatively quickly, though this isn't an easy issue to fix

[csossi]

On first attempt (new page - add template), the loader animation DOES appear but when it leaves the display, the templates haven't quite loaded in full yet (user doesn't have cursor control). User has to wait upwards of 10 seconds in total before they can begin to navigate/select within template section.

When user tries to add additional pages, loading animation appears and section loads in a second or two

[miina]

I'm not seeing this issue when testing, both locally and in the test environment on the first attempt after the Spinner stops showing the templates take less than a second to become available for use. Could it be a connection issue?

@swissspidy Could you confirm if you still see the templates loading within a reasonable time or is it loading slow again?

[swissspidy]

The only slowness I can see is when images are being loaded (after the spinner disappears). There's not much we can do about that I think.

[miina]

Same here, I'll just move this to Ready for Merging for now.