Browse Source

HUE-8181 [assist] Introduce content preloader UX trick to improve speed perception

Enrico Berti 7 years ago
parent
commit
5cbdb1d152

+ 17 - 0
desktop/core/src/desktop/static/desktop/art/assist-preload.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="246px" height="177px" viewBox="0 0 246 177" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#E7E7E7" x="13" y="3" width="138" height="13"></rect>
+        <rect id="Rectangle" fill="#E7E7E7" x="13" y="25" width="156" height="13"></rect>
+        <rect id="Rectangle" fill="#E7E7E7" x="13" y="47" width="167" height="13"></rect>
+        <rect id="Rectangle" fill="#E7E7E7" x="13" y="69" width="138" height="13"></rect>
+        <rect id="Rectangle" fill="#E7E7E7" x="13" y="90" width="156" height="13"></rect>
+        <rect id="Rectangle" fill="#E7E7E7" x="13" y="112" width="138" height="13"></rect>
+        <rect id="Rectangle" fill="#E7E7E7" x="13" y="134" width="156" height="13"></rect>
+        <rect id="Rectangle" fill="#E7E7E7" x="13" y="156" width="156" height="13"></rect>
+    </g>
+</svg>

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


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

@@ -5893,6 +5893,10 @@
           'position': 'relative',
           'width': '100%'
         }).addClass('foreach-wrapper').insertBefore($element);
+        if (options.usePreloadBackground) {
+          $wrapper.addClass('assist-preloader-wrapper');
+          $element.addClass('assist-preloader');
+        }
         $element.css({
           'position': 'absolute',
           'top': 0,

+ 7 - 0
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -741,4 +741,11 @@
       margin-left: 5px;
     }
   }
+}
+
+.assist-preloader-wrapper {
+  background: url(/static/desktop/art/assist-preload.svg) repeat-y @cui-white;
+  .assist-preloader {
+    background-color: @cui-white;
+  }
 }

+ 1 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -272,7 +272,7 @@ from desktop.views import _ko
     </ul>
     <!-- /ko -->
     <!-- ko if: ! hasErrors() && hasEntries() && ! loading() && filteredEntries().length > 0 -->
-    <ul class="database-tree" data-bind="foreachVisible: { data: filteredEntries, minHeight: navigationSettings.rightAssist ? 22 : 23, container: '.assist-db-scrollable', skipScrollEvent: navigationSettings.rightAssist }, css: { 'assist-tables': catalogEntry.isDatabase() }">
+    <ul class="database-tree" data-bind="foreachVisible: { data: filteredEntries, minHeight: navigationSettings.rightAssist ? 22 : 23, container: '.assist-db-scrollable', skipScrollEvent: navigationSettings.rightAssist, usePreloadBackground: true }, css: { 'assist-tables': catalogEntry.isDatabase() }">
       <!-- ko template: { if: catalogEntry.isTableOrView(), name: 'assist-table-entry' } --><!-- /ko -->
       <!-- ko if: navigationSettings.rightAssist -->
         <!-- ko template: { ifnot: catalogEntry.isTableOrView(), name: 'assist-column-entry-assistant' } --><!-- /ko -->

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