loading-overlay instead of removing all rows for OnDemandLists/Grids

[gerpres]

when using OnDemandLists/Grids with async-stores, if the data get's refetched from server, cleanup() is called before firering the request. this removes all rows from the grid and creates an empty pane.

in this pane the optional loading-messages is being displayed.

what if there's a transparent loading-overlay over the original data. the old data stays in background until the new data arrives. IMO this would improve the user experience, since there's no 'flickering' when e.g. filtering the data.

this is only relevant for async-stores. when using in-memory-stores the redraw is too to recognize the changes.

[paulrutter]

+1, i'm experiencing the same issue. Any progress on this one?

UPDATE: I've created a (be it nasty) fix, which temporarily creates a copy of the current results in a domNode, hides the "real" content, and destroys the dummy node when the results are done loading ("dgrid-refresh-complete"). Not very elegant, not the fastest solution since dom manipulation is done, but prevents the "flickering" effect.

    /**
     * @overruled from OnDemandList to prevent flickering
     * Copy the dom into a dummy node before emptying/refreshing it
     */
    refresh: function() {
      this._tmpNode = domConstruct.create("div", {
        "class": "dgrid-content ui-widget-content",
        innerHTML: this.contentNode.innerHTML
      });
      domConstruct.place(this._tmpNode, query(".dgrid-scroller", this.domNode)[0], "last");
      domClass.add(this.contentNode, "hidden"); // should add display:none

      this.inherited(arguments);
    },

    /*
     * bind this function to the table's "dgrid-refresh-complete" event
     */
    _refreshDone: function() {
      // if a dummy node is present, remove it and show the new results
      if (this._tmpNode) {
        domConstruct.destroy(this._tmpNode);
        this._tmpNode = null;
        domClass.remove(this.contentNode, "hidden"); // shows the real results again
      }
    },

    cleanup: function() {
      try {
        this.inherited(arguments);
      } catch(e) {
        // nothing
      }
    },

    removeRow: function() {
      try {
        this.inherited(arguments);
      } catch(e) {
        // nothing
      }
    },