Theme Switcher: Lazy load theme screenshots

[ocean90]

Currently all theme screenshots are loaded, although the section is hidden at first. That needs to be improved.

[celloexpressions]

New patch on #28580 seems to improve this, and also improve performance for other situations where people may be doing this type of thing.

[westonruter]

I'm attaching here a patch I also attached on #28580, and as I commented, in 31793.diff​ the ThemeControl's renderContent method gets deferred until the containing section is expanded, meaning that the screenshots won't load until the Theme Switcher panel is opened. Given the lateness of the release cycle, I think such a Theme Switcher-specific loading optimization should be what is in scope. /cc @mattwiebe

[ocean90]

In 31944:

Customizer: Defer rendering theme controls until the section is displayed.

see #31793.

[ocean90]

31793.patch​ is a first pass for lazy loading screenshots. Screenshots are loaded as soon as the control comes into the view. Doesn't handle search queries yet.

@westonruter: Just noticed the missing props in [31944], sorry!

[celloexpressions]

I feel like we should probably load a bit earlier than that, so that there's time for the image to fully download on a normal/slower connection before the user sees the image. Maybe load 2-3 screenshots ahead?

[westonruter]

​https://github.com/xwp/wordpress-develop/pull/83

[westonruter]

Replying to celloexpressions:

I feel like we should probably load a bit earlier than that, so that there's time for the image to fully download on a normal/slower connection before the user sees the image. Maybe load 2-3 screenshots ahead?

@ocean90: 31793.2.diff​ now implements this. Props redemption ;-)

[DrewAPicture]

Tested this earlier, looked good to me.

[ocean90]

In 32088:

Customizer Theme Switcher: Lazy load theme screenshots.

props westonruter, ocean90.
fixes #31793.

[ocean90]

@westonruter Since [31944] the controls are rendered each time the section expands. I don't see a reason for this, it should only run once.
Currently it breaks the behavior of [32088] where screenshots are missing on another expand.

[ocean90]

31793.3.diff​ adds a isRendered property to api.ThemeControl. Not sure if it's the right approach.

[ryan]

I'm not sure if 31793.3.diff is intended to help with the empty screenshots mentioned in #31794. I gave it a run through on an iPhone 6+ and still see the empty shots.

[westonruter]

Replying to ocean90:

31793.3.diff​ adds a isRendered property to api.ThemeControl. Not sure if it's the right approach.

This patch makes sense, as we don't want to re-render the content if it has already been rendered. However, as with @ryan I still am seeing the empty screenshot, but only starting with the 7th theme listed:

<div class="theme-screenshot">
	<img data-src="http://src.wordpress-develop.dev/wp-content/themes/twentyten/screenshot.png" alt="">
</div>

[ocean90]

In 32119:

Customizer Theme Switcher: Don't re-render a theme control if it has already been rendered.

Move initialization of $customizeSidebar to api.ThemesSection.initialize() to prevent cases where the result can be undefined.

props westonruter, ocean90.
fixes #31793.

[azaozz]

@ocean90, looking at [32088], maybe better to use:

source = $screenshot.attr( 'data-src' );

instead of

source = $screenshot.data( 'src' );

That will get the actual attribute from the element instead of relying on the jQuery caching.

[ryan]

Verifying that I no longer see empty screenshots on iPhone 5, Nexus 5, or iPhone 6+.