Theme Administration Screen: Not enough themes displayed at high resolutions

[Viper007Bond]

I run a high resolution display (2560x1600) and not enough themes are displayed when you first visit the Themes page in the admin area. If you watch carefully, you can see them there and then they quickly disappear when the page finishes loading.

It initially made me think that some of my themes weren't being recognized. If there are still more themes to load and display, then why are we showing the "Add New Theme" item?

A tiny scroll makes them show up.

Screenshot attached. There are actually more themes to be displayed than those shown in the screenshot.

(Sorry if this is a dupe, I had trouble finding specific enough keywords to search on.)

[nacin]

This is funny. matveb set it up to load 20 themes at a time. This is for performance. It has all the data, but when you have a ton of themes and it has to download all of those screenshots. The issue here is that number should probably be high enough to cover even an insane viewport.

So, when I added a fallback for when there's a JS syntax error (or no JS at all, of course). But I didn't limit it to 20 at a time, because there's no pagination fallback. It just prints all of them. If/when the JS successfully loads, it empties the page and re-renders the views. That's the flicker you're seeing. No one else has noticed it because it'd happen out of the viewport.

I have some familiarity with how browsers load images, but I'm not sure if removing a not-yet-loaded image from the DOM would stop it from being downloaded (thus defeating the purpose of the 20-at-a-time).

I can't answer the question of why "add new theme" shows up. Probably because everyone would always scroll down and they'd never see it until they reached the end of their list.

[Viper007Bond]

Can't we just load a ton of themes (up to say 100) and lazy-load the images?

[nacin]

Replying to Viper007Bond:

Can't we just load a ton of themes (up to say 100) and lazy-load the images?

Right. We can actually load them all, the only concern is the images.

We'll need to do <noscript> with actual image tags, and otherwise have an <img src="data: some blank image"> as a placeholder (only after the first 20, let's say) that we can lazy-load as they scroll down the page.

If they're stuck in limbo — they have JS turned on, but there's a syntax error — they'll still see the first 20 theme images, and will still be able to see all of their themes. That's totally acceptable.

[nacin]

In 27744:

Themes screens: Bump to 20 items per page so it fills a high resolution display. see #26968.

[nacin]

It was actually set to 15, so bumping to 20 and punting.