Live preview theme loader

When the app gallery is initialized, it will fully replace the gallery of the theme.  This can cause a flashing effect on the page load:

Reason

As our app does not directly edit your theme, it has to update the store layout directly in the browser, the app is loaded in a way to avoid slowing down the rest of the page, this causes the app to be executed last. 

App gallery loader

The app gallery itself can take a while to render all it's previews and thumbnails, there is a setting to display a loading spinner:

The loader setting reduces the layout shifting by showing the loader at the same height that the gallery will show. However the theme gallery will still show for a short period:

Theme loader

To avoid showing the theme's own gallery on the initial page load, the theme code has to be edited manually to exclude it from the page. 

Preview location

When the theme gallery is excluded on the page, the location settings need to be adjusted.

Automatic

The automatic location setting can only be used in two cases:

1. Dawn based themes

The location on the new free themes from Shopify ( Dawn, Sense, Crave, ..)  can always be set to Automatic.

2. Manual selector in theme

If you updated your theme to provide a manual selector for the live preview as described here: Manual theme selectors

Custom

In all other cases, a custom location is required.  The location should match the element that fully wraps your themes gallery.

Loader HTML

The following HTML snippet can be used to show a loader at the location of the theme gallery:

<div class="cl-po--gallery-loader" style="min-height:300px;">
   <div class="cl-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>

Product tag

It is recommended to use a product tag to only show the loader on products that actually make use of the live preview of the app:

Example

On your theme gallery liquid template, add to following code to check for the product tag and show a loader instead of the theme gallery:

<div class="theme-gallery"> 
 {% if product.tags contains 'live-preview' %}
     <div class="cl-po--gallery-loader" style="min-height:300px;">
        <div class="cl-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
     </div>
 {%- else -%}
	... Here normal theme gallery content ...
 {%- endif -%}
</div>

Dawn theme

On the dawn theme, the code can be added on  sections/main-product.liquid: