Use Array.fill instead to allocate on start, also updated README

README.md

@@ -4,13 +4,18 @@
 
 This library allows you to create Google Contacts style dynamic lists, it is built upon Vue.js hence is easy to integrate into existing websites with or without Vue.
 
-### Demo
----
-![demo](https://owo.insrt.uk/b9d1435e.mp4)
+- [GitLab repository](https://gitlab.insrt.uk/insert/vue-dynamic-list)
+- [NPM package](https://www.npmjs.com/package/vue-dynamic-list)
+- [unpkg CDN link](https://unpkg.com/vue-dynamic-list@1.0.1/index.js)
 
 ### Usage
 ---
 
+Include the library:
+```html
+<script src="https://unpkg.com/vue-dynamic-list@1.0.1/index.js"></script>
+```
+
 In your Vue.js application:
 ```html
 <dynamic-list ref="myList">
@@ -25,6 +30,7 @@ In your Vue.js application:
 
 Using the library:
 ```js
+// create your Vue app, with dynamic-list nested in it
 const app = new Vue({
 	el: '#app'
 });
@@ -45,4 +51,17 @@ new vDynamicList(app, {
 	// choose a suitable limit for each section
 	limit: 100
 });
-```
+```
\ No newline at end of file
+
+### Comparison
+---
+
+> Vue Dynamic List on the left alongside Google Contacts
+
+![Comparison between Google Contacts and Vue Dynamic List](https://owo.insrt.uk/500a5b64.png)
+
+### Demo
+---
+![Demo Video](https://owo.insrt.uk/b9d1435e.mp4)
+
+> Not embedding? [(Direct Link)](https://owo.insrt.uk/b9d1435e.mp4)
\ No newline at end of file

index.js

@@ -6,12 +6,11 @@ class _vDynamicUpdateCycle {
 		this.total = Math.ceil(total / limit);
 		this.limit = limit;
 
-		this.states = [];
+		this.states = Array(this.total).fill(0);
 		this.loadQueue = [];
 		this.canUpdate = true;
 
 		for (let i=0;i<this.total;i++) {
-			this.states.push({loaded: false, loading: false});
 			this.component.sections.push(false);
 		}
 
@@ -25,15 +24,13 @@ class _vDynamicUpdateCycle {
 		});
 	}
 	populate(x, e = false) {
-		let y = [];
-		for (let i=0;i<x;i++) y.push(e);
-		return y;
+		return Array(x).fill(e);
 	}
 	updateElm(i, v) {
 		return new Promise(resolve => {
 			this.load(i, this.limit).then(data => {
 				this.component.sections.splice(i, 1, data);
-				this.states[i].loaded = true;
+				this.states[i] = 2;
 				resolve();
 			});
 		});
@@ -49,16 +46,13 @@ class _vDynamicUpdateCycle {
 		let entries = $('.section');
 		for (let i=0;i<entries.length;i++) {
 			let v = entries[i];
-			if (!this.states[i].loading) {
-				if (this.visible(entries[i])) {
-					this.component.sections.splice(i, 1, this.populate(this.limit));
-					this.states[i].loading = true;
-				}
-			}
-			if (!this.states[i].loaded) {
-				if (this.visible(entries[i])) {
-					this.component.sections.splice(i, 1, this.populate(this.limit));
-					if (this.loadQueue.indexOf([i, v] == -1)) this.loadQueue.push([i, v]);
+			if (this.visible(entries[i])) {
+				switch (this.states[i]) {
+					case 0:
+						this.component.sections.splice(i, 1, this.populate(this.limit));
+						this.states[i]++;
+					case 1:
+						if (this.loadQueue.indexOf([i, v] == -1)) this.loadQueue.push([i, v]);
 				}
 			}
 		};

package.json

 {
   "name": "vue-dynamic-list",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Simple fixed size dynamically loading lists in Vue.js",
   "main": "index.js",
   "scripts": {