Explorar o código

[spark] Smoother UX transitions when displaying results

Romain Rigaux %!s(int64=10) %!d(string=hai) anos
pai
achega
2c557a7

+ 6 - 2
apps/spark/src/spark/templates/editor.mako

@@ -444,9 +444,13 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
           ${ _('Success.') }
         </div>
         
-        <div data-bind="visible: result.hasResultset() && status() == 'available' && result.data().length == 0 && result.meta().length > 0, css: resultsKlass">
+        <div data-bind="visible: result.hasResultset() && status() == 'available' && result.data().length == 0 && result.fetchedOnce(), css: resultsKlass">
           ${ _('Success but empty results.') }
         </div>
+        
+        <div data-bind="visible: status() == 'available' && ! result.fetchedOnce(), css: resultsKlass">
+          ${ _('Loading...') }
+        </div>
 
         <!-- ko if: result.hasSomeResults() && result.type() != 'table' -->
         <div class="row-fluid" style="max-height: 400px; margin-top: 50px">
@@ -491,7 +495,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
           </div>
         </div>
 
-        <div class="row-fluid" data-bind="visible: result.meta().length > 0 && showChart()" style="max-height: 400px; margin-top: 4px">
+        <div class="row-fluid" data-bind="visible: result.fetchedOnce() && showChart()" style="max-height: 400px; margin-top: 4px">
           <div data-bind="visible: isLeftPanelVisible, css:{'span2': isLeftPanelVisible, 'hidden': ! isLeftPanelVisible()}">
             <div class="toggle-left-panel" style="float: right; margin-right: -30px; height: 400px; line-height: 400px; margin-top:0" data-bind="click: toggleLeftPanel">
               <a title="${_('Hide settings')}" class="pointer">

+ 7 - 7
apps/spark/static/js/spark.ko.js

@@ -346,13 +346,6 @@ var Snippet = function (vm, notebook, snippet) {
       if (data.status == 0) {
         rows -= data.result.data.length;
 
-        if (! self.result.fetchedOnce()) {
-          self.result.fetchedOnce(true);        
-   	      data.result.meta.unshift({type: "INT_TYPE", name: "", comment: null});
-   	      self.result.meta(data.result.meta);
-   	      self.result.type(data.result.type);
-        }
-
         var _initialIndex = self.result.data().length;
         var _tempData = [];
         $.each(data.result.data, function (index, row) {
@@ -363,6 +356,13 @@ var Snippet = function (vm, notebook, snippet) {
 
         $(document).trigger("renderData", {data: _tempData, snippet: self, initial: _initialIndex == 0});
 
+        if (! self.result.fetchedOnce()) {          
+     	  data.result.meta.unshift({type: "INT_TYPE", name: "", comment: null});
+     	  self.result.meta(data.result.meta);
+     	  self.result.type(data.result.type);
+     	  self.result.fetchedOnce(true);
+        }
+        
         if (data.result.has_more && rows > 0) {
           setTimeout(function () {
             self.fetchResultData(rows, false);