Featherlight gallery doesn't display loader animation (loading next image lightbox)

Question

I have setup an image lightbox using a Featherlight Gallery.
I'm using a loader animation like this:
http://github.com/noelboss/featherlight/wiki/Add-a-CSS-Only-Loader

However, the animation only shows when you first click on an image.
It you click "next image" then the lightbox is blank while the next image loads.

Test example (how to reproduce this issue):
Go here: http://jsfiddle.net/geraldo/w691hytm/

@-webkit-keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.featherlight-loading .featherlight-content {
  -webkit-animation: featherlightLoader 1s infinite linear;
          animation: featherlightLoader 1s infinite linear;
  background: transparent;
  border: 8px solid #8f8f8f;
  border-left-color: #fff;
  border-radius: 80px;
  width: 80px;
  height: 80px;
  min-width: 0;
}

.featherlight-loading .featherlight-content > * {
  display: none !important;
}

.featherlight-loading .featherlight-close,
.featherlight-loading .featherlight-inner {
  display: none;
}

You will see 3 thumbnail images in the bottom-right of the screen.
Click on the middle image of the birds. It will display a loading animation.

Click the "previous image" arrow. While loading the large image it shows nothing, just a blank white area.

Is the ".featherlight-loading" class not being called when you click "next image"? Do I need to add something to the css?

Thanks in advance.

Answer 1

This is the expected behavior. The loading class gets added when opening lightbox as it provides some visual transition to let the user know something is happening. When switching between images the fade out and in transition effect is supposed to be enough to indicate what is happening.

The problem you have is the images you are using are a crazy size - close to 15MB each. The lightbox UX won't have been designed with the intention of such huge files, so the UX for that is a bit lacking.

It doesn't appear to be putting an obvious class on anything either, but you can still do it if you're willing to hack at the CSS a bit.

Instead of using css to make the .featherlight-content div itself into the loading element when it has a parent with a class of .featherlight-loading, you can add a pseudo-element to .featherlight-content. The crucial thing here is that the loader element will render all the time that the lightbox is displaying, not just when it has a parent with a class of .featherlight-loading. However, when an image loads it will display over the top of it, so you only see it when the box is first loading and when you are transitioning between images.

Here is the updated fiddle: http://jsfiddle.net/w691hytm/20/

And here is the CSS with changes commented:

.inline { display: none }

/**
 * Featherlight Loader
 *
 * Copyright 2015, WP Site Care http://www.wpsitecare.com
 * MIT Licensed.
 */
@-webkit-keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

// removed existing loading styles, added some fixed size when loading class is applied, otherwise spinner would be invisible/cutoff
.featherlight-loading .featherlight-content{
  width: 96px;
  height: 120px;
  background: none;
  overflow: hidden;
  margin: 0;
}

// moved the loader styles to the pseudo-element and added positioning css
.featherlight .featherlight-content:before {
  position: absolute;
  box-sizing: border-box;
  display: block;
  content:'';
  -webkit-animation: featherlightLoader 1s infinite linear;
          animation: featherlightLoader 1s infinite linear;
  background: transparent;
  border: 8px solid #8f8f8f;
  border-left-color: #fff;
  border-radius: 80px;
  width: 80px;
  height: 80px;
  min-width: 0;
  top: calc(50% - 40px);
  left:calc(50% - 40px);
  z-index: 0;
}

// to make the image appear in front of the loader we apply a z-index:
.featherlight .featherlight-content img{
  z-index: 1;
  position:relative;
}
// to make prev and next buttons appear in front of the image we apply a z-index:
.featherlight-previous,
.featherlight-next{
  z-index: 2;
}
.featherlight-loading .featherlight-content > * {
  display: none !important;
}

.featherlight-loading .featherlight-close,
.featherlight-loading .featherlight-inner {
  display: none;
}