Shopify dashing - How to avoid list widget flickering

Please note that the live demo cannot be viewed on IE because dashing does not support IE, either. Because basically Dashing relies on "Server Sent Events"

Original list widget in dashing flickers annoyingly, as also mentioned here. That's simply because the widget redraws the complete list every time there's an update from the server side.

See the problem here (Buzzwords widget flickers)

This widget, on the other hand, is an alternative and a drop-in replacement for the original list widget. It simply creates the list elements beforehand and updates the values inline so that the widget is rendered without any flickering.

Live demo

view raw README.md hosted with ❤ by GitHub

	class Dashing.List extends Dashing.Widget
	onData: (data) ->
	for value, index in data.items
	$(@node).find('ul li:nth-child(' + (index+1).toString() + ')' + ' span.value').text(value.value)
	$(@node).find('ul li:nth-child(' + (index+1).toString() + ')' + ' span.label').text(value.label)

view raw list.coffee hosted with ❤ by GitHub

	<h1 class="title" data-bind="title"></h1>
	<ul class="list-nostyle">
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	<li>
	<span class="label"></span>
	<span class="value"></span>
	</li>
	</ul>
	<p class="more-info" data-bind="moreinfo"></p>
	<p class="updated-at" data-bind="updatedAtMessage"></p>

view raw list.html hosted with ❤ by GitHub