Frontend - Loader component / Lazy load images

[jrgarou]

Main loader

Based on @pedrocasa reference.

• Structure

  <div class="main-loader">
  <div class="main-loader-content">
    <p class="main-loader-text">{{ mainLoaderText }}</p>
    <div class="main-loader-icon">
      <svg class="main-loader-svg" xmlns="http://www.w3.org/2000/svg" viewBox="660 1917.237 23.943 3.763">
        <path class="path-1" d="M661.971 1917.237a1.949 1.949 0 0 1 1.47.538 1.837 1.837 0 0 1 .5 1.362 1.9 1.9 0 0 1-.5 1.326 1.9 1.9 0 0 1-1.47.538 2.05 2.05 0 0 1-1.434-.5 1.809 1.809 0 0 1-.537-1.364 1.993 1.993 0 0 1 .5-1.362 1.949 1.949 0 0 1 1.471-.538z"/>
        <path class="path-2" d="M671.971 1917.237a1.949 1.949 0 0 1 1.47.538 1.837 1.837 0 0 1 .5 1.362 1.9 1.9 0 0 1-.5 1.326 1.9 1.9 0 0 1-1.47.538 2.05 2.05 0 0 1-1.434-.5 1.809 1.809 0 0 1-.537-1.364 1.993 1.993 0 0 1 .5-1.362 1.949 1.949 0 0 1 1.471-.538z"/>
        <path class="path-3" d="M681.971 1917.237a1.949 1.949 0 0 1 1.47.538 1.837 1.837 0 0 1 .5 1.362 1.9 1.9 0 0 1-.5 1.326 1.9 1.9 0 0 1-1.47.538 2.05 2.05 0 0 1-1.434-.5 1.809 1.809 0 0 1-.537-1.364 1.993 1.993 0 0 1 .5-1.362 1.949 1.949 0 0 1 1.471-.538z"/>
      </svg>
    </div>
  </div>
  </div>

  mainLoader.html mainLoader.js

The {{> mainLoader}} it's already in the body. The .main-app receive the show-main-loader class from showMainLoaderClass helper when Session.get('showMainLoader', true)

• Usage

• Use Session.set('mainLoaderText', 'your text here') to change the loader text
• Use Session.set('showMainLoader', true) to show the loader
• Use Session.set('showMainLoader', null) to hide the loader

[jrgarou]

Lazy load thumbs images

To avoid the situation above I've installed the bLazy to show image only when it's loaded. More about it: https://github.com/dinbror/blazy/

Create a new instance: https://github.com/Paratii-Video/paratii-player/blob/3bf7d431ac0eca449fb8d29f860d87c4e9442dd7/imports/ui/pages/playlists/playlists.js#L21-L25

... then revalidate when is need it https://github.com/Paratii-Video/paratii-player/blob/3bf7d431ac0eca449fb8d29f860d87c4e9442dd7/imports/ui/pages/playlists/playlists.js#L50

[jellegerbrandy]

what does that "blazy" resolve exactly? (I'm asking because we have very long load times, and so I am bt wary of installing yet another new library)

[jrgarou]

@jellegerbrandy In my local, images are taking time to load. In playlist page (e.g. /playlists/2) all thumb images are load, not just the visible images in pagination. So the firsts images could take too long time to load, and keep loading when page is changed.

• Are all thumbs rendered before pagination has been activated?

For that I decided to use the bLazy, to control this load and how images are displayed (I didn't setup to load in pagination in the commit). But the slow loading is only in my local. On the staging the image loading is pretty good.