Blaze re-rendering in each loop when appending

help
1

Basically I have an app with a wall similar to instagram which shows adsense ads every x number of elements in the each loop. Problem is that I am only initially loading 30 items and using an infinite load on scroll and sometimes when rendering more elements blaze is re-rendering every DOM element inside the each. Not only is this browser intensive but it destroys the pre-created ads.

To try and bring down the load intensity due to the large number of items being returned and changes that could occur if I were to subscribe to the collection, I am using a server method call to dynamically bring down a set amount of elements and add them to a session variable and append them to the each.

Is there anyway of just rendering onto the end of the already existing each function without the possibility of re-rendering the previous elements?

e.g of current code which I have simplified

var lastAd = 0;
var nextAd = 0;

function onScroll() {
	// Called only once when user scrolls to bottom of page
	Session.set('wallLimit', Session.get('wallLimit') + 1);
	getMoreWallItems();
}

function getMoreWallItems() {
	// Server method to get more wall items
    Meteor.call('getWallItems', Session.get('wallLimit'), function(err, data) {
        if (data) {
            var wallItems = Session.get('wall-items');
            Session.set('wall-items', wallItems.concat(data));
        }
    });
}

Template.wall.helpers({
    wallItems: function() {
        return Session.get('wall-items');
    },
    showAd: function() {
        wallItemCount++;
        if (lastAd === 0) {
            nextAd = 6; // Math.floor(Math.random() * 9) + 5
            lastAd = nextAd;
        }
        if (nextAd === wallItemCount) {
            nextAd = lastAd + 6; // Math.floor(Math.random() * 9) + 5
            lastAd = nextAd;
            return true;
        }
        return false;
    }
}

Template.wall.rendered = function() {
	Session.set('wallLimit', 0);
	getMoreWallItems();
}

<template name="wall">
	<ul>
		{{#each wallItems}}
			{{#if showAd}}
				<li class="isAd" style="min-width: 250px; min-height: 250px;">
					<ins class="adsbygoogle"></ins>
					<script>
						(adsbygoogle = window.adsbygoogle || []).push({});
					</script>
				</li>
			{{/if}}
			<li id="wall_item"></li>
		{{/each}}
	</ul>
</template>
2

I take it your Session variable wallItems contains an array? Have you looked into client-side only collections? Also, I am not sure adding tags inside an #each loop is proper meteor

3

In the end I built and rendered it using pure javascript instead of using the helpers which has actually worked great and fast in my situation and it is not longer rerendering anything in the scope of the wall items.