Bug Fix: Should always rotate the loading spinner.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.6.5
+ * Version  : 3.6.6
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.6.5
+ * Version  : 3.6.6
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2047,8 +2047,8 @@ function LazyLoad(Splide2, Components2, options) {
   function onLoad(data, error) {
     const { _Slide } = data;
     removeClass(_Slide.slide, CLASS_LOADING);
-    remove(data._spinner);
     if (!error) {
+      remove(data._spinner);
       display(data._img, "");
       emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
       emit(EVENT_RESIZE);

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.6.5
+ * Version  : 3.6.6
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2043,8 +2043,8 @@ function LazyLoad(Splide2, Components2, options) {
   function onLoad(data, error) {
     const { _Slide } = data;
     removeClass(_Slide.slide, CLASS_LOADING);
-    remove(data._spinner);
     if (!error) {
+      remove(data._spinner);
       display(data._img, "");
       emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
       emit(EVENT_RESIZE);

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.6.5
+ * Version  : 3.6.6
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2482,9 +2482,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function onLoad(data, error) {
       var _Slide = data._Slide;
       removeClass(_Slide.slide, CLASS_LOADING);
-      remove(data._spinner);
 
       if (!error) {
+        remove(data._spinner);
         display(data._img, "");
         emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
         emit(EVENT_RESIZE);

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.6.5",
+  "version": "3.6.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.6.5",
+  "version": "3.6.6",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/css/core/object/objects/spinner.scss

@@ -2,13 +2,13 @@ $size: 20px !default;
 $border: 2px solid #999 !default;
 
 .splide {
-  $root: &;
-
   &__spinner {
+    animation: splide-loading 1s infinite linear;
     border: $border;
     border-left-color: transparent;
     border-radius: 50%;
     bottom: 0;
+    contain: strict;
     display: inline-block;
     height: $size;
     left: 0;
@@ -18,12 +18,4 @@ $border: 2px solid #999 !default;
     top: 0;
     width: $size;
   }
-
-  &__slide {
-    &.is-loading {
-      #{ $root }__spinner {
-        animation: splide-loading 1s infinite linear;
-      }
-    }
-  }
 }

src/js/components/LazyLoad/LazyLoad.ts

@@ -176,9 +176,9 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
     const { _Slide } = data;
 
     removeClass( _Slide.slide, CLASS_LOADING );
-    remove( data._spinner );
 
     if ( ! error ) {
+      remove( data._spinner );
       display( data._img, '' );
       emit( EVENT_LAZYLOAD_LOADED, data._img, _Slide );
       emit( EVENT_RESIZE );

src/js/test/php/examples/lazyLoad.php

@@ -17,10 +17,11 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide01 = new Splide( '#splide01', {
-        perPage    : 1,
+        perPage    : 2,
         // type       : 'fade',
         lazyLoad   : 'nearby',
         // cover      : true,
+        drag       : 'free',
         rewind     : true,
         heightRatio: ( 9 / 16 ) / 2,
       } );