refactor(db): sync loaded events

Author: davideast

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angularfire2",
-  "version": "4.0.0-rc.3",
+  "version": "4.0.0-rc.3-exp.2",
   "description": "The official library of Firebase and Angular.",
   "private": true,
   "scripts": {

src/database/list/loaded.ts

@@ -2,10 +2,8 @@ import { DatabaseQuery, ChildEvent, DatabaseSnapshot } from '../interfaces';
 import { fromRef } from '../observable/fromRef';
 import { createListSnapshotChanges } from './snapshot-changes';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/skipUntil';
 import 'rxjs/add/operator/skipWhile';
 import 'rxjs/add/operator/withLatestFrom';
-import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/filter';
 import { database } from 'firebase/app';
 
@@ -22,7 +20,7 @@ export function createLoadedChanges(query: DatabaseQuery) {
   // Create an observable of loaded values to retrieve the
   // known dataset. This will allow us to know what key to
   // emit the "whole" array at when listening for child events.
-  const loaded$ = fromRef(query, 'value', 'once')
+  const loaded$ = fromRef(query, 'value')
     .map(data => {
       // Store the last key in the data set
       let lastKeyToLoad;
@@ -35,21 +33,21 @@ export function createLoadedChanges(query: DatabaseQuery) {
     });
   return function snapshotChanges(events?: ChildEvent[]) {
     const snapChanges$ = createListSnapshotChanges(query)(events);
-    return snapChanges$
-      .withLatestFrom(loaded$)
+    return loaded$
+      .withLatestFrom(snapChanges$)
       // Get the latest values from the "loaded" and "child" datasets
       // This way 
-      .map(([snaps, loaded]) => {
+      .map(([loaded, snaps]) => {
         // Store the last key in the data set
         let lastKeyToLoad = loaded.lastKeyToLoad;
-        // Store the lastest key to load as a child event
-        let latestKey = snaps[snaps.length - 1].key;
-        return { snaps, lastKeyToLoad, latestKey }
+        // Store all child keys loaded at this point
+        const loadedKeys = snaps.map(snap => snap.key);
+        return { snaps, lastKeyToLoad, loadedKeys }
       })
-      // This is the magical part, only emit when the latest key
-      // in the dataset matches the last known key. At this point
+      // This is the magical part, only emit when the last load key
+      // in the dataset has been loaded by a child event. At this point
       // we can assume the dataset is "whole".
-      .skipWhile(meta => meta.latestKey !== meta.lastKeyToLoad)
+      .skipWhile(meta => meta.loadedKeys.indexOf(meta.lastKeyToLoad) === -1)
       // Pluck off the meta data because the user only cares
       // to iterate through the snapshots
       .map(meta => meta.snaps);