Uncaught TypeError: Cannot read property 'append' of null at DynamicRadar.append

[patrickng]

We have been using this plugin on production and encountered some issues with the application not loading occasionally. It happens very rarely and I'm not sure what is causing this. It can happen randomly when we refresh the page enough times but we haven't been able to identify a pattern. The error that shows up in the console is:

-private.js:1406 Uncaught TypeError: Cannot read property 'append' of null
    at DynamicRadar.append (-private.js:1406)
    at Class.<anonymous> (component.js:115)
    at ComputedPropertyPrototype.get (ember-metal.js:3274)
    at get (ember-metal.js:2608)
    at RootPropertyReference.compute (references.js:203)
    at RootPropertyReference.value (references.js:70)
    at ArrayIterable.iterate (iterable.js:257)
    at IterationArtifacts.isEmpty (reference.js:502)
    at IterablePresenceReference.value (runtime.js:2889)
    at ReferenceCache.revalidate (reference.js:386)

At that point it looks like skipList is null for some reason:

DynamicRadar.prototype.append = function append(numAppended) {
    _Radar.prototype.append.call(this, numAppended);

    this.skipList.append(numAppended);
};

Any ideas why this could be happening?

[pzuraq]

What's happening here is somehow you're modifying the array twice before the first render. We haven't setup the Radar, so we haven't setup the skiplist by that time. Generally, this shouldn't be possible, but there are some edge cases that cause it to happen it seems.

Check #147, which was a proposed fix for this issue. We're still trying to figure out exactly what the best strategy for dealing with it is.

[patrickng]

Thank you @pzuraq, this was exactly the problem.

We are using ember-infinity addon and what was happening is that with our scrolling context being set to 'window', the loader element was visible before the content was loaded into vertical-collection. As a result, an AJAX request was made for the second batch of items which pushes additional items to the collection. Under normal circumstances, this doesn't seem to be an issue with high speed internet but using the Network Link Conditioner in mac, we were able to trigger this problem much more frequently by emulating a "Very Bad Network".

I read through the discussion in the pull request and also agree that this is a data flow problem and don't think that this addon should be guarding for it. There is an open issue on ember-infinity to move over to immutable arrays as opposed to using the store which would likely have solved the issue that we were experiencing.

So for anyone else running into this, the solution I came up with was to only show the loader element once the last item is reached through the lastReached hook provided by vertical-collection.

**Edit: It seems the network connection isn't a reliable way to reproduce this problem. Having the tab in Chrome loading in the background (switch to another tab) reproduces it every time for us.