Browse Source

HUE-8251 [assist] Add content preloader ghost image only when scrolling

Enrico Berti 7 years ago
parent
commit
0f1ff1bbd0

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 10 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -6253,6 +6253,7 @@
       };
 
       var renderThrottle = -1;
+      var preloadGhostThrottle = -1;
       var lastScrollTop = -1;
       var onScroll = function () {
         if (startIndex > incrementLimit && Math.abs(lastScrollTop - $container.scrollTop()) < (incrementLimit * options.minHeight)) {
@@ -6262,6 +6263,15 @@
 
         setStartAndEndFromScrollTop();
 
+        // adds a preload ghost image just on scroll and removes it 200ms after the scroll stops
+        if (options.usePreloadBackground) {
+          $wrapper.addClass('assist-preloader-ghost');
+          clearTimeout(preloadGhostThrottle);
+          preloadGhostThrottle = setTimeout(function () {
+            $wrapper.removeClass('assist-preloader-ghost');
+          }, 200);
+        }
+
         clearTimeout(renderThrottle);
         var startDiff = Math.abs($parentFVOwnerElement.data('startIndex') - startIndex);
         var endDiff = Math.abs($parentFVOwnerElement.data('endIndex') - endIndex);

+ 4 - 1
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -744,8 +744,11 @@
 }
 
 .assist-preloader-wrapper {
-  background: url(/static/desktop/art/assist-preload.svg) repeat-y @cui-white;
+  background: repeat-y @cui-white;
   .assist-preloader {
     background-color: @cui-white;
   }
+  &.assist-preloader-ghost {
+    background-image: url(/static/desktop/art/assist-preload.svg);
+  }
 }

Some files were not shown because too many files changed in this diff