WordPress.org

Make WordPress Core

Opened 5 years ago

Last modified 7 weeks ago

#26968 new defect (bug)

Theme Administration Screen: Not enough themes displayed at high resolutions

Reported by: Viper007Bond Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: Themes Keywords: needs-patch
Focuses: ui, administration Cc:

Description (last modified by 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.)

Attachments (1)

26968-demo.png (1015.5 KB) - added by Viper007Bond 5 years ago.

Download all attachments as: .zip

Change History (10)

#1 @Viper007Bond
5 years ago

  • Description modified (diff)

#2 @Viper007Bond
5 years ago

  • Description modified (diff)

#3 @Viper007Bond
5 years ago

  • Priority changed from normal to low
  • Severity changed from normal to minor

#4 @nacin
5 years ago

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.

#5 follow-up: @Viper007Bond
5 years ago

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

#6 in reply to: ↑ 5 @nacin
5 years ago

  • Component changed from Administration to Themes
  • Focuses administration added
  • Milestone changed from Awaiting Review to 3.9

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.

#7 @nacin
5 years ago

In 27744:

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

#8 @nacin
5 years ago

  • Milestone changed from 3.9 to Future Release

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

#9 @chriscct7
4 years ago

  • Priority changed from low to normal
  • Severity changed from minor to normal
Note: See TracTickets for help on using tickets.