How to implement endless scrolling with the new Firebase (2016)?

Question

Question:

How to implement efficient infinite scroll in Firebase using javascript (and node.js)?

---

WHAT I CHECKED:

Implement infinite scroll with Firebase?

Problem: earlier firebase ^

Endless Scroll with AngularJs and Firebase

---

CODE FROM: Endless Scroll with AngularJs and Firebase

"First, I recommend creating an Index in your Firebase. For this answer, I create this:

{ "rules": { ".read": true, ".write": false, "messages": { ".indexOn": "id" } } } 

Then do the magic with Firebase:

 // @fb: your Firebase. // @data: messages, users, products... the dataset you want to do something with. // @_start: min ID where you want to start fetching your data. // @_end: max ID where you want to start fetching your data. // @_n: Step size. In other words, how much data you want to fetch from Firebase. var fb = new Firebase('https://<YOUR-FIREBASE-APP>.firebaseio.com/'); var data = []; var _start = 0; var _end = 9; var _n = 10; var getDataset = function() { fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) { data.push(dataSnapshot.val()); }); _start = _start + _n; _end = _end + _n; } 

Finally, the best infinite scroll (without jQuery):

 window.addEventListener('scroll', function() { if (window.scrollY === document.body.scrollHeight - window.innerHeight) { getDataset(); } }); 

I use this approach with React and it flashes quickly no matter how big your data is.

(answered on October 26 15:15 at 15:02)

(by Jobsamuel)

---

PROBLEM

In this solution, n messages will be loaded every time the scroll reaches the end of the screen height.

Depending on the size of the screen, this means that at some point a lot more messages will be loaded than necessary (the height of the screen contains only 2 messages, which means that each time you reach the end of the screen 3 more messages will be downloaded, height with n = 5, for example).

This means that 3*NumberOfTimesScrollHeightHasBeenPassed more messages than necessary will be loaded every time we reach the end of the scroll.

---

MY CURRENT CODE (downloads all messages at once, without endless scrolling):

 var express = require("express"); var router = express.Router(); var firebase = require("firebase"); router.get('/index', function(req, res, next) { var pageRef = firebase.database().ref("posts/page"); pageRef.once('value', function(snapshot){ var page = []; global.page_name = "page"; snapshot.forEach(function(childSnapshot){ var key = childSnapshot.key; var childData = childSnapshot.val(); page.push({ id: key, title: childData.title, image: childData.image }); }); res.render('page/index',{page: page}); }); }); 

Answer 1

Here is the complete code for endless paging.

The createPromiseCallback function createPromiseCallback designed to support both promises and callbacks.

 function createPromiseCallback() { var cb; var promise = new Promise(function (resolve, reject) { cb = function (err, data) { if (err) return reject(err); return resolve(data); }; }); cb.promise = promise; return cb; } 

getPaginatedFeed function implements valid paging

 function getPaginatedFeed(endpoint, pageSize, earliestEntryId, cb) { cb = cb || createPromiseCallback(); var ref = database.ref(endpoint); if (earliestEntryId) { ref = ref.orderByKey().endAt(earliestEntryId); } ref.limitToLast(pageSize + 1).once('value').then(data => { var entries = data.val() || {}; var nextPage = null; const entryIds = Object.keys(entries); if (entryIds.length > pageSize) { delete entries[entryIds[0]]; const nextPageStartingId = entryIds.shift(); nextPage = function (cb) { return getPaginatedFeed(endpoint, pageSize, nextPageStartingId, cb); }; } var res = { entries: entries, nextPage: nextPage }; cb(null, res); }); return cb.promise; } 

And here's how to use the getPaginatedFeed function

 var endpoint = '/posts'; var pageSize = 2; var nextPage = null; var dataChunk = null; getPaginatedFeed(endpoint, pageSize).then(function (data) { dataChunk = data.entries; nextPage = data.nextPage; //if nexPage is null means there are no more pages left if (!nextPage) return; //Getting second page nextPage().then(function (secondpageData) { dataChunk = data.entries; nextPage = data.nextPage; //Getting third page if (!nextPage) return; nextPage().then(function (secondpageData) { dataChunk = data.entries; nextPage = data.nextPage; //You can call as long as your nextPage is not null, which means as long as you have data left }); }); }); 

How about the question of how many items to place on the screen, you can give such a solution, since each message gives a fixed height x, and if this requires more space, put a “read more” link at the bottom of the message when the user clicks. In this case, you can save a fixed number of items on the screen. In addition, you can check the screen resolution to place more or less elements.