New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TemplateInserter extremely slow / lagging #2577
Comments
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 |
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 |
Looks like lazy loading seems to be the best option here, will look into the options that you suggested, @swissspidy. The delay seems to come only from the Most of the images come from Additionally, the background images were already converted to JPEG within 3720900 and scaled smaller within 7e84388 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). |
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. |
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. |
Request For Testing Hi @csossi, Steps:
|
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 |
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? |
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. |
Same here, I'll just move this to Ready for Merging for now. |
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.
The text was updated successfully, but these errors were encountered: