fix(virtualRepeat): Virtual repeat starting off empty #3807

src/components/virtualRepeat/virtualRepeater.js

@@ -365,6 +365,12 @@ function VirtualRepeatController($scope, $element, $attrs, $browser, $document,
   /** @type {number} Most recently seen length of items. */
   this.itemsLength = 0;
 
+  /**
+   * @type {!Function} Unwatch callback for item size (when md-items-size is
+   *     not specified), or angular.noop otherwise.
+   */
+  this.unwatchItemSize_ = angular.noop;
+
   /**
    * Presently rendered blocks by repeat index.
    * @type {Object<number, !VirtualRepeatController.Block}
@@ -407,6 +413,11 @@ VirtualRepeatController.prototype.link_ =
 
 /** @private Attempts to set itemSize by measuring a repeated element in the dom */
 VirtualRepeatController.prototype.readItemSize_ = function() {
+  if (this.itemSize) {
+    // itemSize was successfully read in a different asynchronous call.
+    return;
+  }
+
   this.items = this.repeatListExpression(this.$scope);
   this.parentNode = this.$element[0].parentNode;
   var block = this.getBlock_(0);
@@ -430,14 +441,22 @@ VirtualRepeatController.prototype.readItemSize_ = function() {
 VirtualRepeatController.prototype.containerUpdated = function() {
   // If itemSize is unknown, attempt to measure it.
   if (!this.itemSize) {
-    this.$$rAF(angular.bind(this, this.readItemSize_));
+    this.unwatchItemSize_ = this.$scope.$watch(
+        this.repeatListExpression,
+        angular.bind(this, function(items) {
+          if (items && items.length) {
+            this.$$rAF(angular.bind(this, this.readItemSize_));
+          }
+        }));
+    this.$scope.$digest();
 
     return;
   } else if (!this.sized) {
     this.items = this.repeatListExpression(this.$scope);
   }
 
   if (!this.sized) {
+    this.unwatchItemSize_();
     this.sized = true;
     this.$scope.$watchCollection(this.repeatListExpression,
         angular.bind(this, this.virtualRepeatUpdate_));

src/components/virtualRepeat/virtualRepeater.spec.js

@@ -390,6 +390,22 @@ describe('<md-virtual-repeat>', function() {
     expect(container[0].offsetWidth).toBe(2 * ITEM_SIZE);
   });
 
+  it('should measure item size after data has loaded (no md-item-size)', function() {
+    repeater.removeAttr('md-item-size');
+    createRepeater();
+    scope.$apply();
+    $$rAF.flush();
+
+    expect(getRepeated().length).toBe(0);
+
+    scope.items = createItems(NUM_ITEMS);
+    scope.$apply();
+    $$rAF.flush();
+
+    var numItemRenderers = VERTICAL_PX / ITEM_SIZE + VirtualRepeatController.NUM_EXTRA;
+    expect(getRepeated().length).toBe(numItemRenderers);
+  });
+
   /**
    * Facade to access transform properly even when jQuery is used;
    * since jQuery's css function is obtaining the computed style (not wanted)